徹底理解nth-child和nth-of-type的區別。

最近又有些天沒寫博客了，主要寫一篇下來，太浪費時間了，其實這不是根本，根本是最近比較忙，忙什么呢？最近發現一個問題覺得學習速度太慢了，時間倒是花的很多，但大部分時間都花在無意義的事情上，所有打算改變政策，目前已經整理出一套規范，正在測試中，好了不扯那么多，看正題。

為什么要寫篇呢，主要是因為之前覺得自己已經理解了nth-of-type但后來發現好像和自己之前理解的不太一樣，於是打算寫下來。

nth-child倒很好理解就是選擇第幾個，代碼如下：

<style>
  p:nth-child(2),p:nth-child(7){
    color:red;
  }
</style>
<h1>標題</h1>
<p>這是鍛若</p>
<p>這是鍛若</p>
<span>這是span</span>
<span>這是span</span>
<span>這是span</span>
<p>這是鍛若</p>

效果如下：

可以看出nth-child是根據元素的個數來計算的，盡管我們在:nth-child前面加了p。這個沒啥好說的，但nth-of-type要是不研究一下還真容易理解錯，它說的是按照類型來選擇，看下面這個例子。

<style>
  p:nth-of-type(1),p:nth-of-type(3){
    color:red;
  }
</style>
<h1>標題</h1>
<p>這是鍛若</p>
<p>這是鍛若</p>
<span>這是span</span>
<span>這是span</span>
<span>這是span</span>
<p>這是鍛若</p>

效果如下：

這個也不難理解就是按照類型來計算，碰到一個同類型就加1，那你肯定會說既然如此那有什么好說的，關鍵如果像下面這樣呢，如下：

.item:nth-of-type{color:red}

這種情況又是怎么個案類型法？所以今天主要是探討這個問題。

<style>
  .item:nth-of-type(3){
    color:red;
  }
</style>
<h1>標題</h1>
<p class="item">這是鍛若</p>
<p>這是鍛若</p>
<span>這是span</span>
<span class="item">這是span</span>
<span class="item">這是span</span>
<p class="item">這是鍛若</p>
<p class="item">這是鍛若</p>
<p class="item">這是鍛若</p>

效果如下：

可以看到這里是選中了兩個的，不同類型會被當作多類，只要符合選擇器規范都會選中，額，好像有點簡單哈，主要是這個例子寫的太好了。就這樣。還是總結一下吧。

總結

• nth-child
  按照個數來算。

• nth-of-type
  按照類型來計算，如果是class那么碰到不同類型的，單獨一類，符合條件的選中。