great-good-loading-dog

鬼谷設計

GREAT GOOD DESIGN

nth-child選擇器,CSS怎麼選擇元素總整理

1年前

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