在HTML表格中每x行更改一行颜色

Question

正如问题标题所示,我想每隔x行更改一个表中的行颜色.不是每一行,而是每一行x行.

只是为了解释,这是改变每两行时的样子:JSFiddle

HTML只是一个常规表,如下所示:

<table>
    ...
    <tr>
        <td>content</td>
        <td>more content</td>
    </tr>
    ...
</table>

在示例中,我使用了tr应该标记的类的类,但我想要一种更通用的方式,可能使用nth-child选择器或类似的方式.

有没有人知道一个简单的方法,可能有不同数量的改变行(例如每2行,3行,4行......)？如上所述,我想避免添加类名,因为表可能是动态生成的,因此我很可能无法更改该代码.

Answer 1

您可以使用nth-child设置颜色,如下所示:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

对于2个以上的不同选项,使用公式(a + b),其中a表示循环大小,n是计数器(从0开始),b是偏移值.在这里,我们为索引为3的倍数的所有tr元素指定背景颜色:

tr:nth-child(3n+0) {background:#999;}
tr:nth-child(3n+1) {background:#CCC;}
tr:nth-child(3n+2) {background:#FFF;}

Answer 2

你说得对nth-child。只需考虑 4 的倍数/组：

tr:nth-child(4n+1), tr:nth-child(4n+2) {
    background-color: yellow;
    /* possibly other styles */
}