nth-child（偶数）对于css类只有不是所有节点

Question

尝试仅对某个类'story'的每个其他div进行着色：

<div class="wrap-well">
    <div class="story">odd</div>
    <div class="story">even</div>
    <div class="clearfix"></div>
    <div class="story">odd</div>
    <div class="story">even</div>
    <div class="clearfix"></div>
    <div class="story">odd</div>
    <div class="story">even</div>
</div>

CSS：

.wrap-well div.story:nth-child(even) {
    background-color:#ff00ff;
}

小提琴： http://jsfiddle.net/NF2dk/

但似乎'clearfix'列也被计算在内......

Answer 1

nth-child不适用于选择器，而是元素。无论选择器的组成如何，它都会选择每个偶数div。

您可以使用nth-of-type仅选择<div>个元素，并使用其他元素（例如<br>）作为clearfix。

http://jsfiddle.net/NF2dk/1/

Answer 2

@Marcin和@Explosion Pills绝对是正确的，但是当我检查你的DOM时，你有一个一致的模式，你可以使用Adjacent selector来实现这一点，而不是使用nth-child或{{ 1}}

nth-of-type

Demo

这样，它只会完成您想要实现的工作，与.wrap-well div.story + div.story { background-color:#ff00ff; } 伪相比，它更兼容

Answer 3

没有nth-of-class()选择器。

最接近的是nth-of-type()。但是它会查看元素标记，而不是分配给元素的class。