初學者指南:如何使用 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 來使選擇器更加靈活。