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 */
}

Answer 3

您可以使用tr的nth-child表达式，如下所示：

tr:nth-child(an+b) {    //a and b can be changed to your requirement
    background-color: #AAA;
}

演示here

Answer 4

上述代码示例

tr:nth-child(4n+1), tr:nth-child(4n+2) { 
    background-color: gray;
}

带有4n+1的

n = 0：4 * 0 + 1 = 1 4n+1 n = 1：{* 1}}：4 * 1 + 1 = 5 4n+1 n = 2：{* 1}}：4 * 2 + 1 = 9 4n+1 n = 3：{* 1}}：4 * 3 + 1 = 13 4n+1 n = 4：{* 1}}：4 * 4 + 1 = 17 4n+1 n = 5：{* 1}}：4 * 5 + 1 = 21

4n+2的相同数量：

带有4n+2的

n = 0：4 * 0 + 2 = 2
4n+2 n = 1：{* 1}}：4 * 1 + 2 = 6 4n+2 n = 2：{* 1}}：4 * 2 + 2 = 10 4n+2 n = 3：{* 1}}：4 * 3 + 2 = 14 4n+2 n = 4：{* 1}}：4 * 4 + 2 = 18 4n+2 n = 5：{* 1}}：4 * 5 + 2 = 22

注意：n始终默认为0。

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

4 个答案: