表格布局奇偶行答案

【问题标题】：Table layout odd and even rows表格布局奇偶行
【发布时间】：2013-12-06 13:51:57
【问题描述】：

我有一个表格，它在后面的代码中生成并填充了数据。我给它一个带有 cssClass 属性的 CSS 类测试。现在我想给奇数行和偶数行不同的颜色。但是当我尝试使用正常的 CSS 代码时，它不起作用。

这是我的 CSS 代码：

<style>
.test
   {
    tr:nth-child(even) {background: #CCC}
    tr:nth-child(odd) {background: #FFF}
    }
</style>

这是我添加 cssClass 的代码背后的代码

tableData.CssClass = "test";

【问题讨论】：

【解决方案1】：

您正在尝试嵌套 CSS 规则，这只能在 less/sass 等中实现。

试试这个：

.test tr:nth-child(even) {
background: #ccc;
}
.test tr:nth-child(odd) {
background: #fff;
}

所有主流浏览器都支持 :nth-child() 选择器，IE8 和更早版本除外。

【讨论】：