初學者指南:如何使用 nth-child 選擇具有特定類別的元素

更新日期: 2024 年 10 月 27 日

在學習 CSS 選擇器時,你可能遇到過 :nth-child() 這個偽選擇器,它能根據元素在父容器中的位置來選擇特定的元素。

然而,當你想用 :nth-child() 與具有特定類別的元素結合使用時,可能會發現結果不如預期。

這篇文章將幫助你理解 nth-child 與類別選擇器之間的運作方式,並解決常見的困惑。


:nth-child() 與類別的關係

:nth-child() 是一個根據元素在其父元素中的位置,來選擇元素的偽選擇器。

這意味著它考慮所有的同級元素,而不僅僅是具有特定類別的元素。

例如,如果你有以下 HTML 結構:

<div>
  <div class="red"></div>
  <div></div>
  <div class="red"></div>
  <div></div>
  <div class="red"></div>
</div>

如果你想選擇第二個具有類別 red 的元素,你可能會嘗試這樣做:

div.red:nth-child(2) {
  background-color: red;
}

但是這樣的選擇器,並不會如預期選中第二個帶有類別 red 的元素。

原因在於 :nth-child() 並不是基於類別,而是基於元素在父元素中的位置來進行選擇的。

因此,:nth-child(2) 指的是父元素中的第二個子元素,而不論這個元素是否具有類別 red

在上面的例子中,div.red:nth-child(2) 會選擇第二個 <div>,而這個元素並沒有類別 red


為什麼看起來選擇錯誤?

當你使用 div.red:nth-child(6)div.red:nth-child(9) 時,可能會發現選中的元素數量,或者順序與預期不符。

這是因為 :nth-child() 考慮的是所有同級元素的位置,而不是單獨針對具有某個類別的元素。

因此,在包含多種類別的元素中,使用 :nth-child() 可能會導致你選中錯誤的元素。

這也是為什麼你會發現數字似乎「落後」一個或不符合預期,因為 nth-child 會計算所有同級元素,而不是只計算具有特定類別的元素。

:nth-of-type():nth-child() 的不同

:nth-of-type() 是另一個偽選擇器,它與 :nth-child() 相似,但它只考慮同一類型(例如 <div>)的元素。

這意味著如果父元素中有多種類型的元素,:nth-of-type() 只會計算特定類型的元素。

例如:

<div>
  <div class="red"></div>
  <span></span>
  <div class="red"></div>
  <span></span>
  <div class="red"></div>
</div>

如果你使用以下選擇器:

div.red:nth-of-type(2) {
  background-color: red;
}

這個選擇器會選擇第二個 <div> 元素(即便中間有其他類型的元素,如 <span>)。

但同樣地,它還是基於所有 <div> 元素的位置,而不是僅基於具有類別 red 的元素。


如何選擇第 n 個特定類別的元素?

如果你想要選擇某個特定類別的第 n 個元素,而不是依賴於元素在父元素中的順序,可以考慮使用 JavaScript ,或者使用更靈活的 CSS 選擇器結合方式。

使用 JavaScript

JavaScript 可以幫助你,更精確地選擇具有特定類別的第 n 個元素。

const redElements = document.querySelectorAll('.red');
if (redElements.length >= 2) {
  redElements[1].style.backgroundColor = 'red';
}

在這段代碼中,querySelectorAll('.red') 會選擇所有具有類別 red 的元素,然後我們可以使用陣列索引(例如 redElements[1])來改變第二個 red 元素的樣式。

使用更精確的 CSS(如果可行)

有時候可以重構 HTML ,或使用其他 CSS 選擇器來達到相同的效果。

但具體方法,會依賴於你所控制的 HTML 結構。

例如,考慮將特定的標籤包裝在另一個容器中,從而更精確地應用 CSS。


小結

:nth-child() 是一個強大的 CSS 偽選擇器,但它是基於元素在父容器中的整體順序進行計算的,這意味著,它並不能直接選擇某個特定類別的第 n 個元素。

如果你需要選擇某個類別的第 n 個元素,可以考慮使用 JavaScript 來精確控制,或者通過重構 HTML 來使選擇器更加靈活。

Similar Posts