详解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圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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
基于mysql的论坛(3)
2006/10/09 PHP
MySQL授权问题总结
2007/05/06 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
js实现刷新iframe的方法汇总
2015/04/27 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
Python Mysql自动备份脚本
2008/07/14 Python
Python中的包和模块实例
2014/11/22 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
餐饮收银员岗位职责
2014/02/07 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
委托书范本
2014/09/13 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
windows系统搭建WEB服务器详细教程
2022/08/05 Servers