CSS计数器精讲

CSS 中的计数器类似于变量，可以实现简单的计数功能，并将结果显示在页面上，在早期的网站上应用比较广泛。要实现计数器需要用到以下几个属性：
counter-reset：创建或者重置计数器；
counter-increment：递增变量；
content：插入生成的内容；
counter() 或 counters()：将计数器的值添加到元素。

下面我们就来看一下 CSS 中的计数器是如何使用的。
初始化计数器
要使用计数器首先需要使用 counter-reset 属性来创建一个计数器，这一过程便叫做初始化计数器。counter-reset 属性的语法格式如下：
counter-reset：none | [<identifier> <integer>]

参数说明如下：
none：阻止计数器复位；
<identifier>：定义计数器的名称；
<integer>：定义计数器的起始值，默认值为 0，可以为负值。
计数器自增
初始化计数器后，可以通过 counter-increment 属性来指定计数器何时自增，语法格式如下：
counter-increment：none | [<identifier> <integer>]

参数说明如下：
none：阻止计数器增加；
<identifier>：定义要自增的计数器名称；
<integer>：定义计数器每次增加的数值，默认值为 1，可以为负值。