上篇介紹了選取第一與最後的元素,那我們是否可以選取中間的元素呢?當然也是可以的!
比方說,你可以選擇第三個元素、所有奇數元素、所有偶數元素,甚至依據特定規則選取元素,例如 2、5、8、11 等。
只要遵循 an+b
的公式規則,就能精準選中你想要的元素。
💠:nth-child
基本用法
語法
1 | 選擇器:nth-child(an+b) { |
選取同一層次的兄弟元素中,符合 an+b
位置的元素:
a
是元素的間隔數值,決定每隔幾個元素選一次n
是一個自然數,從 0 開始遞增 (0, 1, 2, 3…),代表每次計算的倍數b
是起始位置的偏移量,決定從哪個位置開始選取
範例
一起試試:[CODEPEN]
1 | <div> |
1. 選中單個元素
1 | .box:nth-child(3) { |
這裡的 :nth-child(3)
等同於公式 0n + 3
,也就是直接選取第 3 個元素。
2. 選中所有偶數元素
1 | .box:nth-child(2n) { |
每個間隔為 2,且無任何偏移,相當於 2n + 0
,每個偶數元素都會被選中
你也可以這樣寫
1 | .box:nth-child(even) { |
even
本身就有雙數的意思,清楚明瞭。
3. 選中所有奇數元素
1 | .box:nth-child(2n+1) { |
這裡每隔兩個元素選一個,並從第一個元素開始,將會選中每個奇數元素
你也可以這樣寫,odd
本身就是奇數的意思
1 | .box:nth-child(odd) { |
4. 選中特定規則元素
1 | .box:nth-child(3n+2) { |
依情境做變化,假設希望是第 2、5、8、11…等呈現,可讓起始偏移量為 2,之後接間隔為 3n,其他規則也是依此類推
💠 總結
:nth-child
提供了一種靈活的方式來選取元素,無論你是需要選擇單一特定元素、偶數、奇數,還是依照自訂規則選擇多個元素,都可以透過 an+b
公式來達成。理解這個公式能幫助你更高效地控制 HTML 結構中的子元素樣式,使你的網頁設計更具靈活性與可擴展性。
🚀實體工作坊分享
玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課
最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程想學習更多關於前後端的線上課程,可以參考看看。
Hahow
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住六角學院
如果你是初學者,非常推薦六角學院哦!剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!也是很多工程師推薦的線上課程網站。