.test:nth-child(1),.test:nth-child(2),.test:nth-child(3) {
color: #0F0
}
https://jsfiddle.net/dkfj2xzj/13/< - 如果有帮助的话,用我的jQuery代码更新
为什么它不跳过.ruinIt类而不是针对第三个.test？
我正在动态添加< div> s< div>如果没有添加.checkDrop类,我需要跳过它.
谢谢
最佳答案
这是因为第n个子选择器并不意味着它是该特定类的第n个.这意味着它是整个第n个兄弟姐妹.
所以nth-child(2)引用你的.reuinIt类,但是它也没有.test类,因此它没有接收任何样式.
你的最后一个.test类是nth-child(4)但是没有应用样式规则.
如果你想看一个有效的例子,我已经更新了你的fiddle here.
例子
：nth-child
这里需要记住的重要一点是：nth-child选择器根据其元素/父元素中的索引/位置专门定位HTML元素.
看一下下面的例子,并注意相应的注释：nth-child选择器的索引如何继续递增,而不管它所针对的元素类型如何.
：nth-of-type
很酷的事情：nth-of-type是它忽略了所有其他不同类型的元素,即如果你所针对的元素是< p>,它将忽略所有周围的“非 – < p>”中计算其指数时的元素.
下面的示例将为您提供对索引规则的基本了解：nth-of-type如下：
更复杂的是：nth-of-type
然而,记住这一点非常重要：nth-of-type基于它在HTML元素类型上的索引值,而不管您用来调用属性的CSS类.
看看下面的例子：
这个例子稍微复杂一点,但如果你把CSS Declarations视为一种过滤规则,它会有所帮助.例如,如果通过键入以下内容创建CSS声明：
.p:nth-of-type(2) {
background-color: red;
}
我基本上是在告诉浏览器2件事情：
>仅< p>标签应该受到影响,
>只有当他们是第二个< p>他们的兄弟姐妹中的标签
当我编写看起来像这样的CSS时,难度很大：
.my-class:nth-of-type(1) {
background-color: red;
}
通过不指定元素类型,我的规则基本上使用以下过滤器进行读取：
>只有具有类my-class的元素才会受到影响,
>只有这些元素是其元素类型的第一个兄弟.
如果要将上面的CSS应用于示例(see fiddle for working example)中的HTML,我们将获得如下所示的输出：
