警告: 著作此文时 (2003年 2月), 主要的浏览器还未支持 (于2001年11月引入), 而且只有少许支持
一种提高易于阅读大型表格的方法是每排以色调交替. 譬如,下面的日期表显示浅灰色背景的偶数排, 以及白底的奇数排. 这规则在此非常简单.
tr:nth-child(even) {background: #CCC}tr:nth-child(odd) {background: #FFF}
事实上, CSS不只准许偶数/奇数的交替, 也准许多变化的间距. ‘偶数’ 与 ‘奇数’ 的关键词就只是方便的简称. 譬如一个长的表格,你可以如此作:
li:nth-child(5n+3) {font-weight: bold}
这就是说, 始于第三位,每第五位列表项目是粗体字,. 换句话说, 项目的第三, 八, 十三, 十八, 二十三, 等等.., 将是粗体字.
偶数与奇数列
同样也可用于表格中的列, 但要有一个文档对应于列中的元素. HTML为此提供COL. 这表格必须从头每一列有一COL:
Month | 1994 | 1995 | 1996... |
---|
(COL除了用于格式,也可用于其它方面, 但在这种情况下我们所须的只是 COL元素的存在) 下列规则给予第一列黄色的背景, 其次是从第三列开始的每隔一列用灰色底.
col:first-child {background: #FF0}col:nth-child(2n+3) {background: #CCC}
排的背景(TR)是先于列的背景(COL)绘制的, 因此若你要确认列的背景的显而易见, 你就不应在排的背景着色.
例:
<style type="text/css">
table tr:nth-child(odd) td {
background: none repeat scroll 00#FFFFFF;}