語言

這是一份翻譯。與英文版本相比，它可能包含錯誤或者過時。翻譯員: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

語言

關於翻譯