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

情况

警告: 著作此文时 (2003年 2月), 主要的浏览器还未支持 'nth-child' selector (于2001年11月引入), 而且只有少许支持 COL element.

偶数与奇数规则

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

 
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Month	1994	1995	1996	1997	1998	1999	2000	2001	2002
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>1994<th>1995<th>1996...

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

 
col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

Month	1994	1995	1996	1997	1998	1999	2000	2001	2002
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)绘制的, 因此若你要确认列的背景的显而易见, 你就不应在排的背景着色.