css選擇器怎麼選取第幾個元素

css選擇器選取第幾個元素的方法：1、使用「first-child」選擇器選取屬於其父元素的首個子元素；2、使用「last-child」選擇清單中的最後一個標籤；3、使用「nth-child(3)」選擇第3個標籤等等。

本文操作環境：windows7系統、HTML5&&CSS3版本、Dell G3電腦。

css用選擇器選取第幾個元素？

css怎麼用選擇器選取第幾個元素？以下這篇文章來為大家介紹CSS使用選擇器實作選取第幾個元素效果的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

在前端開發中，我們可能會碰到這樣的需求：想讓列表中的第一個部分顯示不同的樣式，想讓列表中的偶數部分顯示不同的背景顏色，想讓列表中的最後一部分樣式不一樣……這樣的需求，我們要怎麼實現？

其實，如果前面檔案是php開發的，可以透過php的迴圈語句 判斷語句 css樣式來實現。但是，如果是靜態程式碼，php就無法用了。

這時，我們也可以透過CSS來實現，CSS提供了幾個非常有用的樣式參數：first-child、last-child、nth-child(n)。下面，詳細看一下它們的使用。

1、first-child

first-child選擇器用於選取屬於其父元素的首個子元素的指定選擇器。

選擇li 清單中的 第一個li模組的背景顏色。

li:first-child{background:#090}

2、last-child

last-child表示選擇清單中的最後一個標籤，程式碼如下：

li:last-child{background:#090}

3、nth-child(3)

表示選擇第3個標籤，程式碼如下：

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

上面程式碼中的3也可以改成其它數字，如4、5等。想選擇第幾個標籤，就填寫幾。

4、nth-child(2n)

這個表示選擇清單中的偶數標籤，即選擇 第2、第4、第6… 標籤。

5、nth-child(2n-1)

這個表示選擇清單中的奇數標籤，即選擇 第1、第3、第5、第7…標籤。

6、nth-child(n 3)

這個表示選擇清單中的標籤從第3個開始到最後。

7、nth-child(-n 3)

這個表示選擇清單中的標籤從0到3，即小於3的標籤。

8、nth-last-child(3)

這個表示選擇清單中的倒數第3個標籤。

推薦：《css影片教學》

以上是css選擇器怎麼選取第幾個元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！