語言

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

創建於 6 Febrary 2003;
最後更新 2017年11月09日 星期四 04:40:59

語言

關於翻譯