【CSS】nth-child 與 nth-of-type辨析

nth-child 和 nth-of-type是CSS的兩個僞選擇器。要對相同位置或類似作操做的時候很是有用。前者的字面意思是選擇第幾個子元素，後者的字面意思是選擇某類型的第幾個元素。

首先來看他們的完整格式。

selector:nth-child(an+b)    /* 如 tr:nth-child(3), p:nth-child(2n+1) */
selector:nth-of-type(an+b)   /* 如 p:nth-of-type(3), .info:nth-of-type(2n) */

前面的選擇器（selector）能夠是標記類型（markup type）,也能夠是樣式（style）。後面的序列有不一樣的表達，n是從0開始數起，即0,1,2...，得出來的結果就是選中的序列。咱們分開來一個個看。

先看selector部分。an+b咱們先簡化爲一個數字，只選擇第幾個元素。

• p:nth-child(2) 和 .info:nth-child(2) 有什麼不一樣

有以下HTML代碼：

<div>
    <p class="ph">ph1</p>
    <p class="ph">ph2</p>
    <p class="info">ph3</p>
    <p class="info">ph4</p>
    <p class="ph">ph5</p>
</div>

那麼上面兩個css的結果以下

p:nth-child(2) { /* 樣式生效，背景顯示紅色 */
   background-color: red;
}
.info:nth-child(2) { /* 匹配不到元素，沒有任何效果。你覺得會匹配到<p class="info">ph4</p>,結果並無 */
    background-color: blue;
}

解釋：nth-child的查找步驟有兩步：

1. 按序列因子找到對應子元素
2. 檢查對應元素是否與selector匹配

第一步查找是按照序號絕對查找，寫明是第幾個子元素，就定位到第幾個元素。nth-child(2)就是要找第二個子元素，也就是<p class="ph">ph2</p>
第二步檢查selector是否匹配。<p class="ph">ph2</p>的類型是p，所以上面的第一個樣式應用成功；class有一個類型是ph，但第二樣式提供的是.info,不匹配。所以應用失敗。

• p:nth-of-type(2) 和 .info:nth-of-type(2) 有什麼不一樣

一樣的HTML代碼

<div>
    <p class="ph">ph1</p>
    <p class="ph">ph2</p>
    <p class="info">ph3</p>
    <p class="info">ph4</p>
    <p class="ph">ph5</p>
</div>

以下的兩個樣式

p:nth-of-type(2) { /* 樣式生效，<p class="ph">ph2</p> 背景顯示紅色 */
   background-color: red;
}
.info:nth-of-type(2) { /* 匹配不到元素，沒有任何效果。你覺得會匹配到<p class="info">ph4</p>,結果並無 */
    background-color: blue;
}

解釋：nth-of-type的查找過程也有兩步：

1. 找出同標記類型下的第n個元素。
2. 找出匹配selector的元素。

nth-of-type(2)找的是同類型的第2個元素，這裏只有一種類型p，所以找到的是<p class="ph">ph2</p>。那麼p:nth-of-type(2)這個樣式應用成功，由於<p class="ph">ph2</p>匹配seletor 「p」。可是.info:nth-of-type(2)則應用失敗，由於<p class="ph">ph2</p>的class裏沒有.info。
假設把HTML代碼改一下，將第二個的類型改爲別的，好比span，即

<div>
    <p class="ph">ph1</p>
    <span class="ph">ph2</spanp>
    <p class="info">ph3</p>
    <p class="info">ph4</p>
    <p class="ph">ph5</p>
</div>

那麼.info:nth-of-type(2)就應用成功了，匹配到的是<p class="info">ph3</p>。它是第二個p類型元素，並且class包含.info

總結：
selector:nth-child(n) 找到這樣的元素，它是第n個子元素，且匹配selector
selector:nth-of-type(n) 找到這樣的元素，它是統一標記類型的第n個元素，且匹配selector

《未完》