網頁樣式表
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)繪製的, 因此若你要確認列的背景的顯而易見, 你就不應在排的背景著色.