css中的counter-increment属性

有些情况下需要将网页中的最新排行或者是点击排行靠前的几篇文章用项目序号标注出来。比如说，给10篇文章加上1-10的项目序号，并且在前三篇文章前标注红色的颜色，方便用户阅读。可能有很多方法去完成，有的人会使用额外标签添span或者i内添加数字用css样式控制，还有人会用伪元素before与额外标签结合使用等情况。

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

在这介绍下我的站是如何给文章li标签前加序号。

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

li { counter-increment: listxh;}

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

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

最后，进行样式的添加调整。