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

发布时间:2020-01-13 发布网站:大佬教程
大佬教程收集整理的这篇文章主要介绍了html – nth-child没有针对正确的元素?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

大佬总结

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

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ群:277859234,请注明来意。