CSS3:nth-child和:nth-of-type的区别

CSS中的伪类选择器:nth-child和:nth-of-type

:nth-child和:nth-of-type都可以选择父元素下的子元素。那么他们的区别是什么？

我们先来看第一种情况：

<div>
<p>第一个段落</p>
<p>第二个段落</p>
</div>

这时候用p:nth-child(2)和p:nth-of-type(2)获取的都是"第二个段落"。

那么再看第二种情况，我们在第一个p前面加一个<h4>

<div>
<h4>一个标题</h4>
<p>第一个段落</p>
<p>第二个段落</p>
</div>

这时候用p:nth-child(2)获取的是"第一个段落"。

而用p:nth-of-type(2)获取的是"第二个段落"。

 

这就是:nth-child和:nth-of-type的区别。

p:nth-child(2)要满足两个条件：

1.父元素的第二个子元素

2.这个子元素必需是p

 

而p:nth-of-type(2)则选择的是：

1.父元素的第二个为p的子元素

 

值得一提的是 jquery并不支持:nth-of-type