nth-child（单数）选择一切

Question

我正在尝试为备用行应用样式，这里是fiddle 为什么选择全部？

li { background: green; }
         li:nth-child(odd) { background: red; }

Answer 1

删除html代码中的<br>。这是工作。

Answer 2

在这种情况下，

<Br>也会被计算在内。所以你所有的李都变成了奇数。 如.. ..

1. 利
2. BR
3. 利
4. BR

这就是为什么普通的li选择器不适用，因为li:nth-child(odd) { background: red; }覆盖了所有li。 删除br标签，它应该没问题。

Answer 3

我认为更优雅的解决方案是使用nth-of-type代替，然后您无需删除<br/>

li { background: green; }
li:nth-of-type(odd) { background: red; }

如果您想详细了解不同的nth-of-whatever选项，this css-tricks interactive tutorial可能会让您感兴趣