实用小技巧 css 计数器counter-reset

平时开发过程中遇到一些文档类的网页，比如用户手册，隐私协议等，没次做起来挺麻烦的，特别是前面题号1，1.1，1.2，2.1，偶然发现css计数器counter-reset用到这里简直了，省去不少苦力活，下面就是使用方法：

先看效果：

/* Set counter-name to 0 */
counter-reset: counter-name;

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1c78e9d8fe20423fbb44647ea4969c70~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=218&h=1106&s=35718&e=png&b=ffffff)
/* Set counter-name to -1 */
counter-reset: counter-name -1;

/* Set counter1 to 1, and counter2 to 4 */
counter-reset: counter1 1 counter2 4;

/* Cancel any reset that could have been set in less specific rules */
counter-reset: none;

/* Global values */
counter-reset: inherit;
counter-reset: initial;
counter-reset: unset;

在使用计数器之前，必须使用 counter-reset 属性初始化计数器的值。计数器可通过 counter-increment 属性指定其值为递增或递减。当前计数器的值可通过 counter() 或 counters() 函数显示出来，这通常会在伪元素的 content 属性中使用。

具体文档可以查阅：developer.mozilla.org/zh-CN/docs/…