css 中 nth-child、first-child、last-child 的使用(選中第一個,第幾個,第幾個到第幾個,最後一個等)

浅岛连云發表於2024-08-21

可以配合 li 標籤使用,選擇一列中的哪些標籤。

1.first-child 選擇列表中的第一個標籤

li:first-child{color:red}

2. last-child 選擇列表中的最後一個標籤

li:last-child{color:pink}

3.nth-child(n)

這裡的n為數字,表示選擇列表中的第n個標籤

例如選擇第三個標籤

li:nth-child(3){color:pink}

4.nth-child(2n)

選擇列表中的偶數,選中 2、4、6…… 個標籤。

li:nth-child(2n){color:pink}

5.同理.nth-child(2n-1)就表示選中了奇數位標籤

li:nth-child(2n-1){color:pink}

6.選擇從第4個到最後一個標籤,這個4可以提換成你需要的數字

li:nth-child(n+4){color:pink}

7. 選擇從第一個到第四個 這裡的數字4也是可以根據你的需要替換的。

li:nth-child(-n+4){color:pink}

8.nth-last-child(3) 表示最後三個標籤

li:nth-last-child(3){color:pink}

9.nth-last-child(3n) 表示3的倍數3.6.9……

li:nth-last-child(3n){color:pink}

10.nth-last-child(3n-1) 表示2.5.8…… 可以用這個設定等差數列的樣式

li:nth-last-child(3n-1){color:pink}

希望有幫到你。

相關文章