css - 如何切换表格/网格中行的颜色？

Question

有没有办法在 CSS 或 CSS3 中切换表格/网格中行的颜色？

<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Votes</td>
        </tr>
    </thead>
    <tbody class="rows">
        <tr>
            <td>Barack Obama</td>
            <td>50%</td>
        </tr>
        <tr>
            <td>Mitt Romney</td>
            <td>48%</td>
        </tr>
    </tbody>
</table>

例如，奇数行是白色，偶数行是蓝色。

.rows tr：奇数
{
    背景颜色：白色
}
.rows tr：偶数
{
    背景颜色：蓝色
}

或者那不可能？

Answer 1

:nth-of-type 和 :nth-child 伪元素都可以工作。

我喜欢第 n 个类型的方法：

/* Zebra striping */


  tr:nth-of-type(odd) { 
    background: blue; 
    }

    tr:nth-of-type(even) { 
    background: white; 
    }

Answer 2

.rows tr:nth-child(even) {background-color: White}
.rows tr:nth-child(odd) {background-color: blue}

见jsFiddle

Answer 3

您可以使用nth-child选择器来实现此目的：

.rows tr:nth-child(even) {background-color: #fff}
.rows tr:nth-child(odd) {background-color: blue}

Answer 4

这样做： -

.rows tr:nth-child(even) {
    background-color: blue;
}
.rows tr:nth-child(odd) {
    background-color: yellow;
}

为了让你理解，我已经改变了颜色。

参考现场演示

Answer 5

使用nth-child伪类：

.rows tr:nth-child(odd)
{
    background-color: white;
}
.rows tr:nth-child(even)
{
    background-color: blue;
}​

演示