css 第二个孩子选择器,详解CSS3选择器:nth-child和:nth-of-type之间的差异

先看一个简单的实例，首先是HTML部分：

我是第1个p标签

我是第2个p标签

然后两个选择器相对应的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代码：

我是一个普通的div标签

我是第1个p标签

我是第2个p标签

还是与上面例子一致的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标签染红了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

css 第二个孩子选择器,详解CSS3选择器:nth-child和:nth-of-type之间的差异相关推荐

css2和css1,CSS1，CSS2选择器详解
第一.CSS选择器: 1.元素选择器(也叫标签选择器,是最基本的选择器) html{background-color: red;} div{background-color: yellow;} 2.I ...
css sheet2.0,详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
CSS3.0(Cascading Style Sheet) 层叠级联样式表快速入门: CSS01 h1 { color: red; } 标题一 CSS的三种导入方式: 行内样式(优先级最高,但不建议 ...
html css主题,HTML+CSS＝无限可能——案例详解：我的POI主题作品
原标题:HTML+CSS＝无限可能--案例详解:我的POI主题作品在微博发了这个作业,收到很多好评,实在太开心! 斌叔让我来投稿,那今天就以这个网页为案例,把制作过程中我的方法和经验分享给大家. 作 ...
CSS transition（过渡效果）详解
CSS transition(过渡效果)详解通常当 CSS 的属性值更改后,浏览器会立即更新相应的样式,例如当鼠标悬停在元素上时,通过 :hover 选择器定义的样式会立即应用在元素上.在 CSS3 ...
html 字体模糊,详解css3使用transform出现字体模糊的解决办法
这个问题很奇葩,话不多少直接上代码: .g-dialog-wrapper { position: fixed; top: 50%; left: 50%; transform: translate(-5 ...
详解CSS3中新增的内容属性：content
详解CSS3中新增的内容属性:content 1. 用法: content属性用于插入生成的内容,常和:before选择器和:after选择器配合使用,将生成的内容放在一个元素内容的前面或后面. 2. ...
详解 CSS3中最好用的布局方式——flex弹性布局（看完就会）
文章包含个人理解,错误请指出. 往期css3文章 CSS3基础属性大全 CSS3动画属性 animation详解(看完就会) CSS3 transform 2D转换之移动旋转缩放(详细讲解看完就会 ...
定义html表格的大小和位置,点晴OA工作流表单设计：表格table及宏控件的HTML、CSS、字体参数教程详解...
点晴OA工作流表单设计:表格table及宏控件的HTML.CSS.字体参数教程详解说明:虽然点晴OA内置了强大的富文本编辑器,但是很多时候还是难以实现理想的精确显示效果,为了实现满意的显示效果,网 ...
传智播客html css3笔记,传智播客详解Css3九大常用属性
在Css3的学习和实际操作中,我们经常会接触到一些常用属性,比如字体.文本.列表和背景等.下面,传智播客将对常用的Css3九大属性进行详解. 1.传智播客详解Css3九大常用属性-字体 l Font- ...

css 第二个孩子选择器,详解CSS3选择器:nth-child和:nth-of-type之间的差异

css 第二个孩子选择器,详解CSS3选择器:nth-child和:nth-of-type之间的差异相关推荐

最新文章

热门文章