语言

这是一份翻译。与英文版本相比，它可能包含错误或者过时。翻译员:Samuel Chong of Chinese Translation Services through its pro bono translation services

网页样式表单CSS 提示与窍门

请见索引查看更多提示.

偶数与奇数规则

一种提高易于阅读大型表格的方法是每排以色调交替譬如,下面的日期表显示浅灰色背景的偶数排, 以及白底的奇数排. 这规则在此非常简单 

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Month '94 '95 '96 '97 '98 '99 '00 '01 '02
Jan 14 13 14 13 14 11 11 11 11
Feb 13 15 12 15 15 12 14 13 13
Mar 16 15 14 17 16 15 14 15 15
Apr 17 16 17 17 17 15 15 16 16
May 21 20 20 21 22 20 21 20 19
Jun 24 23 25 24 25 23 25 23 24
Jul 29 28 26 26 27 26 25 26 25
Aug 29 28 27 28 28 27 26 28 26
Sep 24 23 23 26 24 24 24 22 21
Oct 20 22 20 22 20 19 20 22
Nov 18 17 16 17 16 15 14 15
Dec 15 13 13 14 13 10 13 11

事实上, CSS不只准许偶数/奇数的交替, 也准许多变化的间距. `偶数' 与 `奇数' 的关键词就只是方便的简称. 譬如一个长的表格,你可以如此作: 

li:nth-child(5n+3) {font-weight: bold}

这就是说, 始于第三位，每第五位列表项目是粗体字,. 换句话说, 项目的第三, 八, 十三, 十八, 二十三, 等等.., 将是粗体字.

偶数与奇数列

同样也可用于表格中的列, 但要有一个文档对应于列中的元素. HTML为此提供COL. 这表格必须从头每一列有一COL: 

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Month<th>'94<th>'95<th>'96...

(COL除了用于格式,也可用于其它方面, 但在这种情况下我们所须的只是 COL元素的存在) 下列规则给予第一列黄色的背景, 其次是从第三列开始的每隔一列用灰色底： 

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}
Month '94 '95 '96 '97 '98 '99 '00 '01 '02
Jan 14 13 14 13 14 11 11 11 11
Feb 13 15 12 15 15 12 14 13 13
Mar 16 15 14 17 16 15 14 15 15
Apr 17 16 17 17 17 15 15 16 16
May 21 20 20 21 22 20 21 20 19
Jun 24 23 25 24 25 23 25 23 24
Jul 29 28 26 26 27 26 25 26 25
Aug 29 28 27 28 28 27 26 28 26
Sep 24 23 23 26 24 24 24 22 21
Oct 20 22 20 22 20 19 20 22
Nov 18 17 16 17 16 15 14 15
Dec 15 13 13 14 13 10 13 11

排的背景(TR)是先于列的背景(COL)绘制的, 因此若你要确认列的背景的显而易见, 你就不应在排的背景着色.

Bert Bos,style activity lead
Copyright ©1994–2022 W3C®Privacy policy

创建于 6 Febrary 2003;
最后更新2022年02月10日 星期四 05时40分52秒

语言

关于翻译