html–nth-child没有针对正确的元素？

所以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,我们将获得如下所示的输出：

在上面的输出中,您将看到第一个< h2>和第一个< p>无论他们的兄弟姐妹是否应用了我的班级名称,他们都会受到影响. 总结

以上是内存溢出为你收集整理的html – nth-child没有针对正确的元素？全部内容，希望文章能够帮你解决html – nth-child没有针对正确的元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。