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

pelemy發表於2018-01-18
CSS

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

《未完》

相關文章