css怎么獲取第幾個元素

這篇文章主要介紹了css怎么獲取第幾個元素，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

css獲取第幾個元素的方法：1、通過“nth-child(3)”方法獲取列表中的第3個標簽；2、通過“nth-child(2n)”方法獲取列表中的偶數標簽；3、通過“nth-child(2n-1)”方法獲取列表中的奇數標簽等等。

• 該方法適用于所有品牌的電腦。

CSS選取第幾個標簽元素：nth-child(n)、first-child、last-child

前言：今天碼代碼時候遇到的需求要選取前兩個標簽元素，查了資料記錄下來~

nth-child（n）、first-child、last-child用法

注：nth-child(n)選擇器匹配父元素中的第n個子元素。

n可以是一個數字，一個關鍵字，或者一個公式。

nth-child（n）用法：

1、nth-child(3)

表示選擇列表中的第3個標簽，代碼如下：

li:nth-child(3){background:#fff}

2、nth-child(2n)

表示選擇列表中的偶數標簽，即選擇 第2、第4、第6…… 標簽，代碼如下：

li:nth-child(2n){background:#fff}

3、nth-child(2n-1)

表示選擇列表中的奇數標簽，即選擇 第1、第3、第5、第7……標簽，代碼如下：

li:nth-child(2n-1){background:#fff}

4、nth-child(n+3)

表示選擇列表中的標簽從第3個開始到最后，代碼如下：

li:nth-child(n+3){background:#fff}

5、nth-child(-n+3)

表示選擇列表中的標簽從0到3，即小于3的標簽，代碼如下：

li:nth-child(-n+3){background:#fff}

6、nth-last-child(3)

表示選擇列表中的倒數第3個標簽，代碼如下：

li:nth-last-child(3){background:#fff}

first-child用法：

1、first-child

first-child表示選擇列表中的第一個標簽。代碼如下：

li:first-child{background:#fff}

last-child用法：

1、last-child

last-child表示選擇列表中的最后一個標簽，代碼如下：

li:last-child{background:#fff}

感謝你能夠認真閱讀完這篇文章，希望小編分享css怎么獲取第幾個元素內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!