CSS3中對(duì)li標(biāo)簽有多種控制方式,可以實(shí)現(xiàn)多樣的效果。
首先,可以使用list-style-type屬性來控制li標(biāo)簽的列表符號(hào)類型,常用的類型包括:none(不顯示符號(hào))、disc(實(shí)心圓點(diǎn)符號(hào))、circle(空心圓點(diǎn)符號(hào))、square(實(shí)心方塊符號(hào))等等。
例如,下面的代碼將li標(biāo)簽的列表符號(hào)設(shè)為實(shí)心圓點(diǎn):
ul { list-style-type: disc; }其次,可以使用list-style-position屬性來控制列表符號(hào)的位置,通常有兩種可選值:inside(在文本內(nèi)部)和outside(在文本外部)。 例如,下面的代碼將li列表符號(hào)顯示在文本外部:
ul { list-style-position: outside; }當(dāng)然,也可以同時(shí)使用以上兩個(gè)屬性:
ul { list-style-type: circle; list-style-position: inside; }最后,除了以上基本控制方式之外,還可以使用CSS3中的偽類選擇器來對(duì)li標(biāo)簽進(jìn)行控制。例如,可以使用:first-child偽類選擇器來對(duì)第一個(gè)li標(biāo)簽進(jìn)行特殊效果,例如改變其文字顏色:
li:first-child { color: red; }同樣地,還可以使用:last-child選擇器控制最后一個(gè)li標(biāo)簽,或者使用:nth-child(n)選擇器控制第n個(gè)li標(biāo)簽。 總之,CSS3擁有豐富的控制方式,充分發(fā)揮其潛力可以實(shí)現(xiàn)許多酷炫的效果。
上一篇3 php