上篇介紹了選取第一與最後的元素，那我們是否可以選取中間的元素呢？當然也是可以的！

比方說，你可以選擇第三個元素、所有奇數元素、所有偶數元素，甚至依據特定規則選取元素，例如 2、5、8、11 等。

只要遵循 an+b 的公式規則，就能精準選中你想要的元素。

💠:nth-child 基本用法

語法

選擇器:nth-child(an+b) { 
	屬性名: 屬性值; 
}

選取同一層次的兄弟元素中，符合 an+b 位置的元素：

• a 是元素的間隔數值，決定每隔幾個元素選一次
• n 是一個自然數，從 0 開始遞增 (0, 1, 2, 3...)，代表每次計算的倍數
• b 是起始位置的偏移量，決定從哪個位置開始選取

範例

一起試試：[CODEPEN]

<div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

1. 選中單個元素

.box:nth-child(3) {
  background-color: skyblue;
}

這裡的 :nth-child(3) 等同於公式 0n + 3，也就是直接選取第 3 個元素。

2. 選中所有偶數元素

.box:nth-child(2n) {
  background-color: skyblue;
}

每個間隔為 2，且無任何偏移，相當於 2n + 0 ，每個偶數元素都會被選中

你也可以這樣寫

.box:nth-child(even) {
  background-color: skyblue;
}

even 本身就有雙數的意思，清楚明瞭。

3. 選中所有奇數元素

.box:nth-child(2n+1) {
  background-color: skyblue;
}

這裡每隔兩個元素選一個，並從第一個元素開始，將會選中每個奇數元素

你也可以這樣寫，odd 本身就是奇數的意思

.box:nth-child(odd) {
  background-color: skyblue;
}

4. 選中特定規則元素

.box:nth-child(3n+2) {
  background-color: skyblue;
}

依情境做變化，假設希望是第 2、5、8、11…等呈現，可讓起始偏移量為 2，之後接間隔為 3n，其他規則也是依此類推

💠總結

:nth-child 提供了一種靈活的方式來選取元素，無論你是需要選擇單一特定元素、偶數、奇數，還是依照自訂規則選擇多個元素，都可以透過 an+b 公式來達成。理解這個公式能幫助你更高效地控制 HTML 結構中的子元素樣式，使你的網頁設計更具靈活性與可擴展性。