當前位置:首頁 > 建站常識 > 列表

CSS選取第幾個(gè)标簽元素:nth-child、first-child、last-child

點擊:時(shí)間:2018/5/30關鍵詞:上海網頁設計 上海網站開發
1、first-childfirst-child表示選擇列表中的(de)第一個(gè)标簽。代碼如下(xià):li:first-child{background:#090}上面的(de)意思是,li 列表中的(de) 第一個(gè)li模塊的(de)背景顔色。2、last-childlast-child表示選擇列

<a href=/tags/shanghaiwangyesheji/><strong>上海網頁設計</strong></a>

1、first-child

first-child表示選擇列表中的(de)第一個(gè)标簽。代碼如下(xià):

li:first-child{background:#090}上面的(de)意思是,li 列表中的(de) 第一個(gè)li模塊的(de)背景顔色。

2、last-child

last-child表示選擇列表中的(de)最後一個(gè)标簽,代碼如下(xià):li:last-child{background:#090}

3、nth-child(3)

表示選擇列表中的(de)第3個(gè)标簽,代碼如下(xià):li:nth-child(3){background:#090}上面代碼中的(de)3也(yě)可(kě)以改成其它數字,如4、5等。想選擇第幾個(gè)标簽,就填寫幾。

4、nth-child(2n)

這(zhè)個(gè)表示選擇列表中的(de)偶數标簽,即選擇 第2、第4、第6…… 标簽。

5、nth-child(2n-1)

這(zhè)個(gè)表示選擇列表中的(de)奇數标簽,即選擇 第1、第3、第5、第7……标簽。

6、nth-child(n+3)

這(zhè)個(gè)表示選擇列表中的(de)标簽從第3個(gè)開始到最後。

7、nth-child(-n+3)

這(zhè)個(gè)表示選擇列表中的(de)标簽從0到3,即小于3的(de)标簽。

8、nth-last-child(3)

這(zhè)個(gè)表示選擇列表中的(de)倒數第3個(gè)标簽。

預約建站
免費提供網站優化(huà)
領取關鍵詞