眾所周知,html標簽中的無序列表(ul)和有序列表(ol)中的每個列表項(li)前面都有一個點用來標識序號或者項目符號。有時候,我們希望消除這個點,讓列表項呈現出無點的狀態,這時候就需要使用css來解決了。
要消除li的點,我們可以使用list-style屬性。這個屬性有三個值,分別是list-style-type、list-style-image和list-style-position。其中,list-style-type就是用來設置項目符號或者數字的類型,我們可以將其設置成none。代碼如下:
li { list-style-type: none; }
上面的代碼會將無序列表和有序列表中每個列表項前面的點全部消除。
除了設置成none,list-style-type還有其他的取值,比如disc、circle、square、decimal、lower-roman等等。這些取值對應的符號或數字都是瀏覽器默認的,根據需要選擇即可。
另外,如果只想消除部分列表項前面的點,可以針對特定的li使用:nth-child偽類或者類名等方式進行樣式設置,如下所示:
/*消除第一個列表項前面的點*/ li:first-child { list-style-type: none; } /*消除類名為no-dot的列表項前面的點*/ li.no-dot { list-style-type: none; } /*消除第3個以及3的倍數的列表項前面的點*/ li:nth-child(3n), li:nth-child(3n+1) { list-style-type: none; }
總之,列表項前面的點的消除可以通過設置list-style-type為none來實現,只需根據需要設定在特定的li上,即可達到效果。