完全理解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那麼碰到不一樣類型的，單獨一類，符合條件的選中。