nth-child和:nth-of-type的区别
Posted yueyang2017
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了nth-child和:nth-of-type的区别相关的知识，希望对你有一定的参考价值。
:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素，
而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。
例：
<div class="box">
<div>1</div>
<p>1</p>
<p>2</p>
</div>
.box p:nth-child(1){
color:red; //选择失败，因为.box下面的第一个子元素不是p
}
.box p:nth-child(2){
color:red; //选择的元素是<p>1</p>
}
.box p:nth-child(3){
color:red; //选择的元素是<p>2</p>
}
.box p:nth-of-type(1){
color:red; //选择的元素是<p>1</p>
}
以上是关于nth-child和:nth-of-type的区别的主要内容，如果未能解决你的问题，请参考以下文章