CSS计数器:counter

最近的需求，明星字体销售排行榜中，需要对字体的销售情况进行排序。

在早期，只有ol和ul可以对子元素li进行排序；如果不使用这两个标签，就由前台开发去手动填写序号。

当然，在这个需求中，数据不是实时更新的，手动填写序号并不是太麻烦。但是，像在线人数排行榜这些需要实时更新排名的页面，无论是插入新数据还是删除数据，都会涉及到后面数据序号变动。这样子就需要遍历后面的数据并逐条修改，增加浏览器的负担。

就想到CSS中的计数器counter这一属性，它可以对指定的元素进行自动排序。在CSS2.1规范中就加入了counter这一属性，配合伪元素:before、:after中的content使用，显示计数器的内容。

 

CSS计数器包括了counter-reset、counter-increment、content三个属性、counter() 函

数，以及伪元素:before、:after。

语法说明：

counter-reset：identifier [integer]。

默认值为none

indetifier：自定义的计数器名称，必选；

integer：计数器起始值，默认为0，可选；若设置值为0，则从1开始计数；

功能：用来标识计数器的作用域。可以包含多个计数器标识符

    

 

效果图：

 

counter-increment：identifier [integer]。

默认值为none

indetifier：counter-reset中声明的计数器标识符，必选；

integer：整数值，序号变化的间隔，正值则递增变化，负值则递减变化，也可为0；默认为1，可选；若设置值为2，且counter-reset中设置为0或未设置integer，元素序号为2、4、6 以此类推；

功能：用来标识计数器及其元素序号变化规则。

counter()：配合content使用，接受两个参数，用逗号分隔。

第一个参数：counter-increment中定义的计数器标识符；

第二个参数：计数器风格，类似于list-style-type。

 

兼容性

在CSS2.1就被加入了规范，这一属性实用性很强，各大浏览器已经都支持，可以放心使用啦^_^