css怎么獲取第幾個元素

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

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

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

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

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

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

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

n可以是一個數(shù)字，一個關(guān)鍵字，或者一個公式。

nth-child（n）用法：

1、nth-child(3)

表示選擇列表中的第3個標(biāo)簽，代碼如下：

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

2、nth-child(2n)

表示選擇列表中的偶數(shù)標(biāo)簽，即選擇 第2、第4、第6…… 標(biāo)簽，代碼如下：

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

3、nth-child(2n-1)

表示選擇列表中的奇數(shù)標(biāo)簽，即選擇 第1、第3、第5、第7……標(biāo)簽，代碼如下：

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

4、nth-child(n+3)

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

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

5、nth-child(-n+3)

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

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

6、nth-last-child(3)

表示選擇列表中的倒數(shù)第3個標(biāo)簽，代碼如下：

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

first-child用法：

1、first-child

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

li:first-child{background:#fff}

last-child用法：

1、last-child

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

li:last-child{background:#fff}

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