上篇介紹了選取第一與最後的元素,那我們是否可以選取中間的元素呢?當然也是可以的!
比方說,你可以選擇第三個元素、所有奇數元素、所有偶數元素,甚至依據特定規則選取元素,例如 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 結構中的子元素樣式,使你的網頁設計更具靈活性與可擴展性。