Css3中list-style-type的实用属性及属性详细解读

前些日对WordPress添加目录列表的时候，因为要对目录的Css进行调整，巧合的是在谷歌浏览器的开发者工具中发现了li列表的list-style-type的属性设置为disclosure-closed的时候，实现了箭头向右侧的三角形图标，所以闲暇之余就对Css3中li列表的list-style-type下的属性及其用法进行了测试和详细的解读。

以下列举三个实用的list-style-type属性值及list-style-type的属性值详细解析。

去掉li标签前面的小圆点

通常在我们制作前端页面时，大部分前端人员的做法就是去掉li标签前面默认的小圆点，那么怎么去掉li标签前面的小圆点呢？

li{list-style-type:none;}

将li的list-syle-type设置为none属性就可以去掉默认的实心小圆点样式。

给li列表前新增一个向右的三角形图标

如上图所示及文章开头所述，就是设置了li的list-syle-type属性为disclosure-closed，就显示了此样式，感觉设置为disclosure-closed属性看上去也还是挺美观的。

li{list-style-type:disclosure-closed;}

给li列表前新增一个阿拉伯递增数字

之前我写过一篇《利用Css3伪元素before特性给无序列表添加排序功能》一文，当时是用的Css3的伪元素before的方法在li列表前新增了一个阿拉伯递增数字，现在通过对li的list-syle-type属性进行设置就能实现这个功能，而且更为简单方便。

li{list-style-type:decimal;}

将li的list-style-type属性设置为decimal就可以给li列表前新增一个阿拉伯递增数字。

list-style-type属性值及作用：

通过对list-style-type的属性值设置，可以使得我们在调用多条数据的时候，让li无序列表看上去更加的美观，个人感觉本文列举的三种list-style-type的属性还是比较使用的。