CSS3 :nth-child() 与:nth-of-type()

:nth-child()选择器，该选择器选取父元素的第 N 个子元素，与类型无关

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

以下代码可以看出区别。

代码：

<div>

<p class="item">123</p>

<p class="item">123<p>

<h2 class="item">123</h2>

<p class="item">123</p>

<p class="item">123</p>

<p class="item">123</p>

<p>123</p>

</div>

.item:nth-child(3n){background-color:red;}

效果：

p:nth-child(3n){background-color:red;}

效果：

 .item:nth-of-type(3n){background-color:red;}

效果：

 p:nth-child(3n){background-color:red;}

效果：