CSS2中counter-increment使用方法

在很多的情况下，我们需要对网页中的热文或者是浏览比较多的前几篇文章用序号标重点突出来。比如说，给全文中10篇浏览最多的文章加上1-10的项目序号，并且给前三篇文章标注红色的颜色，方便用户阅读。或许实现的方法不一，可以使用额外标签添span或者i标签来控制序号的样式，也可以使用伪元素before与额外标签结合使用等情况。

最近，偶然看到css中的counter-increment属性可以简单方面的给标签前面添加项目序号，说实话这个属性我还是第一次见到，它就像一个for循环可以自动遍历li标签或者给其他标签增加项目序号。具体介绍可以到w3c教程网去瞧瞧。

在这里给大家介绍用使用用counter-increment属性给li标签添加项目序号

首先，给li标签定义一个计数器的名字，比如listitem。

li {counter-increment: listitem;}

然后，给每个li标签前加序号。

li:before {content: counter(listitem);}

最后，添加样式即可。