详解CSS3选择器:nth-child和:nth-of-type之间的差异


Posted in HTML / CSS onSeptember 18, 2017

先看一个简单的实例,首先是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标签的文字变成了红色:

详解CSS3选择器:nth-child和:nth-of-type之间的差异

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

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

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

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

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

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

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

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

p:nth-child(2) { color: red; }

详解CSS3选择器:nth-child和:nth-of-type之间的差异

 

p:nth-of-type(2) { color: red; }

详解CSS3选择器:nth-child和:nth-of-type之间的差异

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 #HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 #HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 #HTML / CSS
用css3写出气球样式的示例代码
Sep 11 #HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 #HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 #HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 #HTML / CSS
You might like
聊天室php&amp;mysql(三)
2006/10/09 PHP
PHP array_push 数组函数
2009/12/26 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
基于vue实现分页效果
2017/11/06 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
Python文件去除注释的方法
2015/05/25 Python
Python的Django框架安装全攻略
2015/07/15 Python
TensorFlow如何实现反向传播
2018/02/06 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
优秀党员申报材料
2014/12/18 职场文书
母亲节寄语大全
2015/02/27 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
2016年十一促销广告语
2016/01/28 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书