详解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弹性伸缩布局之box布局
Jul 12 HTML / CSS
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 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
操作Oracle的php类
2006/10/09 PHP
计数器详细设计
2006/10/09 PHP
Php注入点构造代码
2008/06/14 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
jquery tab标签页的制作
2010/05/10 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
Python实现list反转实例汇总
2014/11/11 Python
Python中的hypot()方法使用简介
2015/05/18 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
python数据挖掘需要学的内容
2019/06/23 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
python之随机数函数的实现示例
2020/12/30 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
2014年司法所工作总结
2014/11/22 职场文书
暂住证明怎么写
2015/06/19 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis