: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;}
效果:
![CSS3 :nth-child() 与:nth-of-type() - icess - 看,有灰机 CSS3 :nth-child() 与:nth-of-type() - icess - 看,有灰机](http://img0.ph.126.net/los9vfDIdU0WsbdHNp68nQ==/6631264578281720931.jpg)
p:nth-child(3n){background-color:red;}
效果:
![CSS3 :nth-child() 与:nth-of-type() - icess - 看,有灰机 CSS3 :nth-child() 与:nth-of-type() - icess - 看,有灰机](http://img0.ph.126.net/30tFaox1QtNj1C7-Y82cWw==/6631353638723574705.jpg)
.item:nth-of-type(3n){background-color:red;}
效果:
![CSS3 :nth-child() 与:nth-of-type() - icess - 看,有灰机 CSS3 :nth-child() 与:nth-of-type() - icess - 看,有灰机](http://img2.ph.126.net/YyNfG8xPaFViubfPQFbGqw==/6631204105142194919.jpg)
p:nth-child(3n){background-color:red;}
效果:
![CSS3 :nth-child() 与:nth-of-type() - icess - 看,有灰机 CSS3 :nth-child() 与:nth-of-type() - icess - 看,有灰机](http://img1.ph.126.net/t-mK5XJLoEMfYrGqpUw5pg==/6631411912839844546.jpg)