css選擇器選取制定第幾個(gè)元素的方法

這篇文章主要介紹了css選擇器選取制定第幾個(gè)元素的方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

css選擇器選取第幾個(gè)元素的方法：1、使用“first-child”選擇器選取屬于其父元素的首個(gè)子元素；2、使用“l(fā)ast-child”選擇列表中的最后一個(gè)標(biāo)簽；3、使用“nth-child(3)”選擇第3個(gè)標(biāo)簽等等。

css用選擇器選取第幾個(gè)元素？

css怎么用選擇器選取第幾個(gè)元素？下面本篇文章來(lái)給大家介紹一下CSS使用選擇器實(shí)現(xiàn)選取第幾個(gè)元素效果的方法。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

在前端開發(fā)中，我們可能會(huì)碰到這樣的需求：想讓列表中的第一個(gè)部分顯示不同的樣式 ，想讓列表中的偶數(shù)部分顯示不同的背景顏色，想讓列表中的最后一部分樣式不一樣……這樣的需求，我們?cè)鯓觼?lái)實(shí)現(xiàn)？

其實(shí)，如果前面文件是php開發(fā)的，可以通過(guò)php的循環(huán)語(yǔ)句+判斷語(yǔ)句+css樣式來(lái)實(shí)現(xiàn)。但是，如果是靜態(tài)代碼，php就無(wú)法用了。

這時(shí)，我們還可以通過(guò)CSS來(lái)實(shí)現(xiàn)，CSS給我們提供了幾個(gè)非常有用的樣式參數(shù)：first-child、last-child、nth-child(n)。下面，詳細(xì)看一下它們的使用。

1、first-child

first-child選擇器用于選取屬于其父元素的首個(gè)子元素的指定選擇器。

選擇li 列表中的 第一個(gè)li模塊的背景顏色。

li:first-child{background:#090}

2、last-child

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

li:last-child{background:#090}

3、nth-child(3)

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

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

上面代碼中的3也可以改成其它數(shù)字，如4、5等。想選擇第幾個(gè)標(biāo)簽，就填寫幾。

4、nth-child(2n)

這個(gè)表示選擇列表中的偶數(shù)標(biāo)簽，即選擇 第2、第4、第6…… 標(biāo)簽。

5、nth-child(2n-1)

這個(gè)表示選擇列表中的奇數(shù)標(biāo)簽，即選擇 第1、第3、第5、第7……標(biāo)簽。

6、nth-child(n+3)

這個(gè)表示選擇列表中的標(biāo)簽從第3個(gè)開始到最后。

7、nth-child(-n+3)

這個(gè)表示選擇列表中的標(biāo)簽從0到3，即小于3的標(biāo)簽。

8、nth-last-child(3)

這個(gè)表示選擇列表中的倒數(shù)第3個(gè)標(biāo)簽。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css選擇器選取制定第幾個(gè)元素的方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!