每两个表格行的nth-child

小编典典

css

我需要将表的每两行设置为灰色，如果可能的话，我希望使用nth-child。

我已经和克里斯·科耶尔（Chris Coyier）的第一个孩子测试员混为一谈，但仍然无法[理解。

我需要以下公式：

1,2 - grey
3,4 - white
5,6 - grey
7,8 - white
9,10 - grey

等等。我不希望在html中放置一个类，因为我敢肯定这将是一些建议。如果有办法与nth-child合作，这就是我想要的。

阅读 292

2020-05-16

共1个答案

小编典典

意识到您正在做4组，那么您可以看到每个第4个元素和每个第4个元素减去一个为白色，然后每个第4个元素减去2，或者每个第4个元素减去3为灰色。

因此，您将使用4n和4n-1，然后使用4n-2和4n-3：

div:nth-child(4n), div:nth-child(4n-1) {
    background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
    background: blue;
}

该代码并不适合您的情况，我是为jsFiddle概念验证编写的。

注意：nth-childIE8中不起作用。当然，典型的问题。

2020-05-16