Question

从小提琴开始http://jsfiddle.net/sujesharukil/j5acY/

我有两个ul元素。两人都离开了。 CSS创建一个平铺结构。我使用nth-child（偶数）和nth-child（odd）交替使用li元素的背景颜色。嗯，这适用于第一个连续5个li元素的UL。然而，对于第二个，连续只有4个li元素。因此，偶数和奇数正确设置背景颜色，但它看起来不是交替。如何使第二个UL的li替代，使每行中的第一个元素具有替代颜色？

希望我有意义！

ul li:nth-child(even){
    background-color: #6a8bab;
}

ul li:nth-child(odd){
    background-color: rgb(106, 170, 126);
}

http://www.clipular.com/c?5949919=sZxixdiI2WDpJIW27yoP4qoTreQ&f=.png

Answer 1

可以这样做，但这取决于行数。如果您只有两行，则以下内容将起作用：

ul.four li {
    background-color: silver;
}


ul.four li:nth-child(5n+1), ul.four li:nth-child(5n+3)   {
    background-color: black;
}

http://jsfiddle.net/j5acY/1/

从第1个元素开始重复每个第5个元素，从第3个元素开始重复。它基本上是从左上角到右下角的对角线。如果你添加第3行，它会中断，因为左下角不会是黑色，所以你需要手动选择它，例如使用ul.four li:nth-child(9)

http://jsfiddle.net/j5acY/2/

当然，如果你添加另一行，它会再次破坏。即使您在上一个示例中使用了ul.four li:nth-child(5n+9)，我们也达到了选择器ul.four li:nth-child(5n+3)开始匹配错误并因此错误地匹配第13个元素的限制。然后，您可以使用ul.four li:nth-child(13)：

手动将其设置为白银

http://jsfiddle.net/j5acY/3/

这当然必须遵循先前规则将方块设置为黑色。如您所见，如果添加行，则必须不断更新。

另一种方法是可无限扩展，但需要预先进行更多工作，如果添加更多列，则无法扩展。通过这种方法，您可以重复每个第8个元素，从第一个元素开始，然后是第三个元素，第六个元素，最后是第八个元素：

ul.four li:nth-child(8n+1), ul.four li:nth-child(8n+3),
ul.four li:nth-child(8n+6), ul.four li:nth-child(8n+8){
    background-color: black;
}

http://jsfiddle.net/j5acY/4/

正如您所看到的，您拥有多少行并不重要。如果添加更多列，它会立即中断。如果您使用6列，则需要重新计算以重复每个第12个元素并添加更多以处理额外的列。

CSS3 nth-tile tile背景颜色根据列数交替显示

1 个答案: