在網(wǎng)頁(yè)設(shè)計(jì)中，我們可能會(huì)碰到這樣的需求：想讓列表中的第一個(gè)部分顯示不同的樣式 ，想讓列表中的偶數(shù)部分顯示不同的背景顏色，想讓列表中的最后一部分樣式不一樣，等等……這樣的需求，其實(shí)我們可以用CSS選取元素來(lái)實(shí)現(xiàn)。

CSS怎么用選擇器選取第幾個(gè)元素？STU網(wǎng)頁(yè)設(shè)計(jì)來(lái)給大家介紹一下CSS使用選擇器實(shí)現(xiàn)選取第幾個(gè)元素效果的方法。有需要的同學(xué)可以參考一下。同時(shí)提示下li標(biāo)簽外面要有ul標(biāo)簽哦~

first-child

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

示例：li:first-child{background:#090}

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

last-child

last-child表示選擇列表中的最后一個(gè)標(biāo)簽

示例：li:last-child{background:#090}

說(shuō)明：選擇li 列表中的 最后一個(gè)li模塊的背景顏色。

nth-child(3)

表示選擇第3個(gè)標(biāo)簽

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

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

nth-child(2n)

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

nth-child(2n-1)

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

nth-child(n+3)

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

nth-child(-n+3)

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

nth-last-child(3)

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