CSS nth-child 選擇器全攻略：如何選擇和應用元素

學習如何使用 CSS nth-child 選擇器來選擇和應用特定元素。無論是選擇偶數元素、奇數元素，還是第一個元素，這篇文章將詳細介紹 nth-child 的各種用法，幫助你在網頁設計中創造出更豐富的效果。

學習如何使用 CSS nth-child 選擇器來選擇和應用特定元素。無論是選擇偶數元素、奇數元素，還是第一個元素，這篇文章將詳細介紹 nth-child 的各種用法，幫助你在網頁設計中創造出更豐富的效果。
nth-child選擇器
:nth-child(2)

1

2

3

4

5

6

選擇第2個

選擇器範例一原始碼-codePen

:nth-child(n)

1

2

3

4

5

6

選擇第n個，n會從0往上遞增，例: 0、1、2

選擇器範例二原始碼-codePen

:nth-child(n + 2)

1

2

3

4

5

6

選擇第n + 2個，n會從0往上遞增，例: 0+2、1+2、2+2

選擇器範例三原始碼-codePen

:nth-child(2n)

1

2

3

4

5

6

選擇第n + 2個，n會從0往上遞增，例: 2×0、2×1、2×2

選擇器範例四原始碼-codePen

:nth-child(2n + 1)

1

2

3

4

5

6

選擇第2n + 2個，n會從0往上遞增，例: 0×2+1、1×2+1、2×2+1

選擇器範例五原始碼-codePen

:nth-child(-n + 2)

1

2

3

4

5

6

選擇第-n + 3個，n會從0往上遞增，常用來選擇前面某幾個，例: -0+2、-1+2、-2+2

選擇器範例六原始碼-codePen

:nth-child(n + 2):nth-child(-n + 4)

1

2

3

4

5

6

選擇第n + 2個到第-n + 4個，n會從0往上遞增，常用來選擇第幾個到第幾個區間

選擇器範例七原始碼-codePen

:nth-child(odd)

1

2

3

4

5

6

選擇奇數

選擇器範例八原始碼-codePen

:nth-child(even)

1

2

3

4

5

6

選擇偶數

選擇器範例九原始碼-codePen

:first-child

1

2

3

4

5

6

選擇第一個

選擇器範例十原始碼-codePen

:last-child

1

2

3

4

5

6

選擇最後一個

選擇器範例十一原始碼-codePen

喜歡這篇文章嗎？歡迎分享給更多朋友！

← 回到文章列表 回到首頁 →