css 计数器 && counter-increment && counter-reset

css 计数器

简介

1，counter-increment和counter-reset 加上伪元素::before 或者::after 中的content属性 组合起来 用于显示计数

2，counter-increment属性用来递增一个或多个计数器，
counter-increment属性通常是和counter-reset属性，content属性一起使用

3, counter-reset 本意是重置一个计数器，没有这个计数器 也会创建计数器，第一个值 通常为创建的计数器名称或者需要重置的计数器名称，这里可以自定义，第二值为计数器本身的值 或者重置到的值，默认为0。
4， counter-increment 用来计数的属性，此时如果你的dom结构中出现了一次这个数据，它规定的计数器值将会加或者减去对应的值，默认为1，可以手动设置不同的值，属性第一个值为计数器名称，第二个值为为加减的值，默认值为none 也就是默认加1，同时也可以设置为负值代表每次减少对应的值
5，伪元素，都有一个content属性，用来显示文本，在这里我们可以这样使用计数器 content: counter(xxx); counter() 这个函数用来使用计数器的值，参数为计数器的名称，同时content这个属性还可以拼接字符串。

举个例子

 


  

    
a
    
b
    
c
    
d
    
e
    
f
  

显示结果如下，默认直接加1

此时我们稍微改动一点，给计数器添加个默认值

结果就变成下面这样，都在10的基础继续加1。

然后我们让每次增加2个，这里写成负数，就为递减了

果然每次递增2个，写成负数就是递减。

我们还可以在before 中从content继续拼接字符串,这里拼接了个 ‘+’

结果如下