CSS nth-child(An + B) 選擇器入門指南：新手必讀
更新日期： 2024 年 10 月 22 日
在網頁設計中，經常需要針對列表、表格或區塊中的特定元素應用不同的樣式。
CSS 的 nth-child() 選擇器提供了一個強大且靈活的方式來選取某些序列中的元素。
特別是 nth-child(An + B) 這種語法，能夠幫助我們輕鬆選取具有規律的元素。
本篇文章將介紹 nth-child(An + B) 的基本用法，並通過實際範例幫助你理解它的強大之處。
什麼是 nth-child(An + B)？
nth-child(An + B) 是 CSS 中的一個偽類選擇器，用來選取父元素的子元素，根據元素的位置（index）來進行選擇。
An + B 中的 A 和 B 是可以變化的參數，它們能夠控制哪些子元素會被選中。
- A：代表間隔數。當
A是 1 時，表示每個元素都會被選取，當A是 2 時，表示每隔一個元素選取一次，依此類推。 - B：代表起始點。
B決定從哪個位置開始選取元素。
這個公式允許我們根據元素的順序，靈活地選取某些元素，而不需要逐一手動選取。
基本語法
selector:nth-child(An + B) {
/* 樣式規則 */
}selector：你想要選取的元素類型或標籤。An + B：代表選取規則，其中A和B是可以變化的數字。
如何理解 An + B？
要了解 nth-child(An + B)，可以把它看作是一個數學公式，它會根據序列中的元素位置來進行篩選。
每個 A 和 B 都可以是正數、負數或零，它們決定了選擇的模式。
A：決定間隔。例如，2n會選擇所有偶數位置的元素，3n則會選擇每第三個元素。B：決定從哪個位置開始。例如，n + 1會從第一個元素開始，每個元素都選取，而2n + 3會從第三個元素開始，然後每隔一個選取一次。
具體範例
讓我們來看幾個具體範例，以便更好理解這個選擇器的運作方式。
範例講解
選取偶數元素
假設我們有一個列表，我們想為所有偶數項目設置樣式：
HTML
<ul>
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
<li>項目 4</li>
<li>項目 5</li>
</ul>CSS
li:nth-child(2n) {
background-color: lightblue;
}結果
這裡的 2n 表示選取每隔兩個的元素，具體就是偶數位置的元素。結果將會選取第二個、第四個元素，它們的背景顏色會變為淺藍色。
選取奇數元素
同樣的，我們可以使用 nth-child 來選取所有奇數位置的元素：
CSS
li:nth-child(2n+1) {
background-color: lightgreen;
}結果
這段程式碼會選取第一個、第三個、第五個項目，並將它們的背景設為淺綠色。2n+1 表示從第一個元素開始，每隔一個元素選取一次，也就是奇數位置的元素。
從第三個元素開始，每隔三個選取一次
假設我們希望從第三個元素開始，每隔三個元素選取一次，我們可以這樣寫：
CSS
li:nth-child(3n+3) {
background-color: yellow;
}結果
這裡的 3n+3 表示從第三個元素開始，每隔三個元素選取一次，所以第三個、第六個元素會被選中，並應用黃色背景。
選取前四個元素中的每一個
如果你只想選取前幾個元素，nth-child 也可以幫助你做到。
比如要選取列表中的前四個元素：
CSS
li:nth-child(-n+4) {
font-weight: bold;
}結果
這段程式碼會選取列表中的前四個元素，並將它們的字體加粗。-n+4 表示選取前四個元素，負數的 n 值使得選取範圍僅限於頭部的元素。
更複雜的 nth-child 應用
選取特定的範圍
你可以結合 An + B 來選取特定範圍內的元素。例如，如果你想選取從第五個開始的每一個元素，可以這樣寫：
CSS
li:nth-child(n+5) {
background-color: pink;
}結果
這段程式碼會選取從第五個元素開始的所有元素，並為它們應用粉紅色背景。
選取特定模式的元素
如果你想要選取一個特定模式的元素，例如：選取列表中的第三個、第五個和第八個元素，你可以這樣結合 nth-child 使用：
CSS
li:nth-child(3), li:nth-child(5), li:nth-child(8) {
background-color: orange;
}結果
這段程式碼會為第三、第五和第八個元素應用橙色背景。
nth-child() 與 nth-of-type() 的區別
nth-child() 是根據元素在父元素中的順序來選擇，而 nth-of-type() 是根據元素的類型來選擇。
換句話說，nth-child() 不會考慮元素的類型，只看它在父元素中的位置；而 nth-of-type() 只選取特定類型的元素。
範例
假設我們有以下結構：
<div>
<p>段落 1</p>
<p>段落 2</p>
<h2>標題</h2>
<p>段落 3</p>
</div>p:nth-child(2)會選取第二個子元素，也就是p標籤，因為它是第二個元素。p:nth-of-type(2)會選取第二個p標籤，不論其在父元素中的位置。
結論
CSS 的 nth-child(An + B) 選擇器是一個功能強大且靈活的工具，它允許你根據元素在父元素中的位置來選擇元素。
無論是選取每隔幾個的元素、選取特定範圍內的元素，還是進行更複雜的模式選擇，nth-child 都能大大簡化你的 CSS 編寫過程。
希望這篇文章能幫助你理解 nth-child() 的基本概念，並在實際開發中靈活運用這個選擇器，讓你的網頁設計更具效率和美感！