CSS 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