html – CSS nth-child错过了元素

发布时间:2020-08-03 整理:编程之家
编程之家收集整理的这篇文章主要介绍了html – CSS nth-child错过了元素编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随编程之家小编过来看看吧!
好像css nth-child错过了它的目标,任何想法?

jsFiddle source

HTML:

<a href="#">red</a>
<br />
<a href="#">none</a>
<br />
<a href="#">gray</a>

CSS:

a:nth-child(1) {
    color:red;
}
a:nth-child(3) {
    color:gray;
}

解决方法

使用 nth-of-type()而不是 nth-child(),如果你删除< br />,它将完美地工作标签,因为@FritsvanCampen评论它是一个孩子

a:nth-of-type(1) {
    color:red;
}
a:nth-of-type(3) {
    color:gray;
}

为了更好地理解参考:http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

Fiddle

总结

以上是编程之家为你收集整理的html – CSS nth-child错过了元素全部内容,希望文章能够帮你解决html – CSS nth-child错过了元素所遇到的程序开发问题。

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

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!