Day16-:nth-child 照著規則，所有元素任你選

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

比方說，你可以選擇第三個元素、所有奇數元素、所有偶數元素，甚至依據特定規則選取元素，例如 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 結構中的子元素樣式，使你的網頁設計更具靈活性與可擴展性。

🚀實體工作坊分享

玩轉 Web 頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。