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,可以为负值。