色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

控制li第2個(gè) 用css

李中冰2年前11瀏覽0評論

在網(wǎng)頁設(shè)計(jì)中經(jīng)常需要控制列表(<li>標(biāo)簽),比如改變它們的樣式或者對它們進(jìn)行排序等操作。本文介紹如何使用CSS來控制列表中的第二個(gè)元素。

li:nth-child(2){
/* 控制第二個(gè) li 標(biāo)簽的樣式 */
}

上面的代碼中,:nth-child()是CSS3選擇器中用來控制某個(gè)元素在其兄弟元素中的位置的偽類。其中,括號中的數(shù)字就是要選擇的元素在其父元素中的位置。

使用li:nth-child(2)這個(gè)選擇器,就能控制列表中的第二個(gè)<li>標(biāo)簽。比如,如果要把第二個(gè)列表項(xiàng)的字體顏色變?yōu)樗{(lán)色,就可以這樣寫:

li:nth-child(2){
color: blue;
}

我們還可以使用這個(gè)選擇器來對列表中的元素進(jìn)行編號。比如下面這個(gè)列表:

<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>

可以使用如下代碼把它們的編號顯示出來:

li:before{
content: counter(my-counter);
counter-increment: my-counter;
margin-right: 5px;
}
li:nth-child(2){
counter-reset: my-counter 1;
}

上面的代碼中,counter()counter-increment是CSS3中用來顯示和遞增一個(gè)計(jì)數(shù)器的屬性。而counter-reset則是用來重置計(jì)數(shù)器的屬性。通過給第二個(gè)<li>標(biāo)簽設(shè)置counter-reset: my-counter 1;,就可以把它的序號重置為1了。

總之,CSS3中的:nth-child()選擇器可以方便地控制列表中的某個(gè)元素,并且還可以借助其實(shí)現(xiàn)一些常用的功能,比如給列表項(xiàng)編號等。學(xué)好這個(gè)選擇器,可以讓我們在網(wǎng)頁設(shè)計(jì)中更加靈活自如。