當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3 :nth-child() 选择器

發布時間：2025/3/15 CSS 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3 :nth-child() 选择器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

nth-child() 選擇器是選擇父標簽的第幾個元素

菜鳥教程練習（就不放圖片了）
p:nth-child(2) 選擇父元素的第二個為p標簽的元素。如果第二個標簽不是p就不起作用

他會選擇后代的所有標簽如果只想選中子代的標簽可以使用子代選擇器 .class>p:nth-child(1)

CSS選取第n個標簽元素
最近做一個項目，碰到這樣的需求，需要選取某個元素的倒數第幾個標簽元素，想讓他顯示不同的樣式

1、first-child

first-child表示選擇列表中的第一個標簽。例如：li:first-child{background:#fff}

2、last-child

last-child表示選擇列表中的最后一個標簽，例如：li:last-child{background:#fff}

3、nth-child(3)

表示選擇列表中的第3個標簽，例如：li:nth-child(3){background:#fff}，代碼中的3也可以改成其它數字，如4、5等。想選擇第幾個標簽，就填寫幾。

4、nth-child(2n)

這個表示選擇列表中的偶數標簽，即選擇第2、第4、第6…… 標簽，例如：li:nth-child(2n){background:#fff}

5、nth-child(2n-1)

這個表示選擇列表中的奇數標簽，即選擇第1、第3、第5、第7……標簽，例如：li:nth-child(2n-1){background:#fff}

6、nth-child(n+3)

這個表示選擇列表中的標簽從第3個開始到最后。

7、nth-child(-n+3)

這個表示選擇列表中的標簽從0到3，即小于3的標簽。

8、nth-last-child(3)

這個表示選擇列表中的倒數第3個標簽。

以上是生活随笔為你收集整理的CSS3 :nth-child() 选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。