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