Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

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

:nth-child

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

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

nth-child

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



💠:nth-child 基本用法

語法

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

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

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

範例

一起試試:[CODEPEN]

1
2
3
4
5
6
7
8
9
10
11
12
<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. 選中單個元素

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

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

:nth-child(3)



2. 選中所有偶數元素

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

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

你也可以這樣寫

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

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

:nth-child(even)



3. 選中所有奇數元素

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

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

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

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

:nth-child(odd)



4. 選中特定規則元素

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

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

:nth-child(3n+2)


💠 總結

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



🚀實體工作坊分享

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

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



🚀線上課程分享

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

Hahow

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



六角學院

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


Udemy

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