nth-child与nth-of-type的区别

先说nth-child吧，这个比较好理解，举个栗子

<div class="wrap">
    <p>水果</p>
    <span>apple</span>
    <span>banana</span>
    <span>orange</span>
    <span>peach</span>
    <span>lemon</span>
    <span>grape</span>
</div>
<div class="wrap">
    <p>喝的</p>
    <span>yogurt</span>
    <span>milk</span>
    <span>wine</span>
    <span>coffee</span>
    <span>cocacola</span>
    <span>tea</span>
</div>

.wrap span:nth-child(2)
{
	color:red;
}

结果

 

ele:nth-child(n) 就是要同时满足

1、第n个元素，这个n是相对于父元素下的所有元素来计数的，不区分是p还是span（此处n=2，即定位到父元素下的第2个元素）

2、该元素必须是ele元素（此处必须是span）

同样滴，class:nth-child(n)也适用

如果将以上样式改为下面，还有用么

.wrap span:nth-child(1)
{
	color:red;
}

结果

显然无效，因为会去找第一个元素就是  <p>水果</p>  ，但是这个又不是span，所以不满足

---

然后就是nth-of-type了，这是个奇葩 哈哈 我对它有过误解

先来个正常的

.wrap span:nth-of-type(1)
{
	color:red;
}

结果

 它不像nth-child完全根据位置来选择的，而是根据type。这里的type就是span元素，只看.wrap的span元素，这就叫type，所以apple是第一个span

再来一个我踩过的坑

<div class="wrap">
    <p>水果</p>
    <span>apple</span>
    <span class="item">banana</span>
    <span class="item">orange</span>
    <span>peach</span>
    <span>lemon</span>
    <span>grape</span>
</div>
<div class="wrap">
    <p>喝的</p>
    <span>yogurt</span>
    <span>milk</span>
    <span>wine</span>
    <span>coffee</span>
    <span class="item">cocacola</span>
    <span class="item">tea</span>
</div>

.wrap .item:nth-of-type(2)
{
	color:red;
}

.wrap .item:nth-of-type(3)
{
	color:blue;
}

结果

 

先看第一段‘水果’，它是怎么找的呢？

class=item对应的元素是span，所以会去找同一父元素.wrap下的所有span元素。然后定位到span的第2、3个元素，你以为这样就匹配到了？？ 其实有个隐藏点。这里还要去看第2、3个span元素是不是有item样式，符合才会选中。‘喝的’那一段就是很好的验证

第二段中，class=item对应的元素是span，所以会去找同一父元素.wrap下的所有span元素。然后定位到span的第2、3个元素；但此时的milk、wine是都没有item样式的，所以都不符合，都不选中。

---

呐  所以

ele:nth-child( )、class:nth-child( )、ele:nth-of-type( ) 都相对好理解些

class:nth-of-type( ) 这个奇葩在使用的时候还要注意下

---

补充下：

nth-child(n)  nth-of-type(n)

n取值范围是：0 ~ 正无穷

() 括号的值域是：1、2、3、4、5 。。。（0是无效的）

举个栗子吧

nth-of-type(-n+5)

括号中的值域就是：负无穷 ~ 5

但最终选中的是 第1-5个（0是无效的）