css计数器基本用法

counter-reset          定义计数器
counter-increment      定义计数器步长
counter() / counters() 使用计数器

1. counter-reset

counter-reset: count1

1.1 在同一层级中，重复使用counter-reset，可重新开始计数，与重置的含义吻合
1.2 多个计数器可在不同的层级配合使用
1.3 可设置计数器初始值 counter-reset: myCounter 1，默认初始值为0
1.4 可一次创建多个计数器并设置初始值 counter-reset: myCounter myCounter2 1 myCounter3 9
1.5 ol的内置计数器名为list-item，可修改器初始值和步长 counter-reset: list-item 10; counter-increment: list-item 2;
1.6 counter-reset: none 可取消之前的计数器

2. counter-increment

步长默认为1，可不写

counter-increment: count1 1
counter-increment: count1 2
counter-increment: count1 -3

3. counter() / counters()

content: counter(count1)

3.1 必须在content属性配合伪元素使用
3.2 counter 计算符前后可以随意加字符串来对最后的效果做拼接，例如 content: 'step' counter(level1) '.';
3.3 可显示罗马数字，例如 content: counter(level1, upper-roman) '.';
3.4 content: counters(level1, '-') '. ' counters是在嵌套层级中使用的，支持按分割符连接层级数字，例如 1-3-1