首页 > web前端 > css教程 > 正文

比较CSS3选择器:nth-child和:nth-of-type之间的区别

巴扎黑
发布: 2017-09-20 09:51:59
原创
1949 人浏览过

本篇文章主要介绍了CSS3选择器:nth-child和:nth-of-type之间的差异,非常具有实用价值,需要的朋友可以参考下

先看一个简单的实例,首先是HTML部分:


<section>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>
登录后复制

然后两个选择器相对应的CSS代码如下:


p:nth-child(2) { color: red; }
登录后复制
登录后复制


p:nth-of-type(2) { color: red; }
登录后复制
登录后复制

上面这个例子中,这两个选择器所实现的效果是一致的,第二个p标签的文字变成了红色:

尽管上面两个demo的最后效果一致,但是两个选择器之间存在差异是必然的。

对于:nth-child选择器,在简单白话文中,意味着选择一个元素:

1、这是个段落元素
2、这是父标签的第二个孩子元素

对于:nth-of-type选择器,意味着选择一个元素:

1、选择父标签的第二个段落子元素

我们把上面的实例稍作修改,就可以看到这两个选择器之间的差异表现了,如下HTML代码:


<section>
    <p>我是一个普通的p标签</p>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>
登录后复制

还是与上面例子一致的CSS测试代码:


p:nth-child(2) { color: red; }
登录后复制
登录后复制


p:nth-of-type(2) { color: red; }
登录后复制
登录后复制

这时候两个选择器所渲染的结果就不一样了。

p:nth-child(2)其渲染的结果不是第二个p标签文字变红,而是第一个p标签,也就是父标签的第二个子元素。

p:nth-of-type(2)的表现显得很坚挺,其把希望渲染的第二个p标签染红了。

以上是比较CSS3选择器:nth-child和:nth-of-type之间的区别的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板