4

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

我有两个 ul 元素。两者都有 li 漂浮在左边。CSS 创建平铺结构。我正在使用 nth-child(even) 和 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

4

1 回答 1

4

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

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/

这会每隔 5 个元素重复一次，从第 1 个开始，再从第 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 个元素并添加更多以处理额外的列。

于 2013-05-17T08:18:39.680 回答