css选择器:nth-child()与:nth-of-type()的差异

时间:2021-01-16 04:00:03

:nth-child()和:nth-of-type()都是Css3中的伪类选择器,其作用相似却又不完全相同。

名词解释

:nth-child()选择器匹配其父元素的第n个子元素,不论元素类型。

:nth-of-type()选择器匹配其父元素特定类型的第n个子元素的每个元素。

例子一

html代码

<p>我是第一个p标签 </p>
<p>我是第二个p标签 </p>

将第二个p标签变红,css代码如下

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

两个选择器实现的效果是一致的。

css选择器:nth-child()与:nth-of-type()的差异

例子二

html代码

<span>我是第一个span元素</span>
<p>我是第一个p标签 </p>
<p>我是第二个p标签 </p>

依旧使用例子一中的css代码,看到的结果如下

css选择器:nth-child()与:nth-of-type()的差异css选择器:nth-child()与:nth-of-type()的差异

p:nth-child(2)期望元素是p并且是父元素的第二个元素,需要同时满足这两个条件。

p:nth-of-type(2)的意思是,父元素下的第二个p元素,无论前后是否存在其它元素。