css计数器基本用法

发布时间 2023-08-14 11:12:20作者: 看风景就
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