今天和大家简单说说 counter-reset，它的作用就是重置计数器或者说是初始化计数器。我们常用来制作自动编号、列表编号等。
一、语法形式
selector {
counter-reset: <counter-name> <integer>?;
}
<counter-name>：计数器名称，自己起的名字。<integer>：计数器起始值，它是可选的，默认是0。
你可以同时重置多个计数器，只需要用空格分开即可。
二、用法示例
1. 基础用法
假设你有这样一个HTML结构
<body>
<h1>大鹅真帅</h1>
<h1>大鹅真棒</h1>
<h1>大鹅无敌</h1>
</body>
我现在想在每个 h1 内容前加上诸如 第N节 这样的前缀，那我们只需要这样做
body {
counter-reset: eee;
}
h1 {
counter-increment: eee;
}
h1::before {
content: "第 " counter(eee) " 节：";
}
呈现结果如下
是不是一下子就会了！
2. 自定义起始值
根据语法，我们知道第二个参数就是起始值，我们只需要增加第二参数即可。
body {
counter-reset: eee 1;
}
我们将起始值改为 1 ，那么在遇到 h1 之后，就会在 1 的基础上进行递增了
3. 自定义增幅
在上面的教程中，我们已经学会了如何设置初始值，但现在有了新的需求：我想在起始值上，每次增加2而不是1，那该如何做呢？
其实，我们上面的例子中，已经使用到了 counter-increment ，它同样具有第二参数 —— 就是增幅，我们只需要修改即可。
h1 {
counter-increment: eee 2;
}
4. 倒数计数
在上面的例子中，我们都是在正向计数，其实我们还可以实现倒数，只需要将 counter-increment 第二参数改为负数即可。
h1 {
counter-increment: eee -1;
}
5. 多计数器
现在我不想使用整数了，想尝试变成 1.1、2.3、3.5 这种，头大！
那么此时，多计数器就派上用场了！
body {
counter-reset: eee1 eee2 -1;
}
h1 {
counter-increment: eee1 eee2 2;
}
h1::before {
content: "第 " counter(eee1)"."counter(eee2) " 节：";
}
你可以根据需求，实现任意组合！
6. 终极嵌套
现在给你一个这样的HTML结构
<h1>
大鹅真帅
<h2>玉树临风</h2>
<h2>惨绿少年</h2>
</h1>
<h1>
大鹅真棒
<h2>学富五车</h2>
<h2>倚马千言</h2>
<h2>你们来编</h2>
</h1>
我们想让每个 h1 自增，每个 h1 里面的h2 也自增，但格式为 1.1、1.2 1.3这种！发动你的脑筋，想想该如何实现呢？
什么，不想思考！像你这样的人，到底要如何改变~
那直接开卷！
body {
counter-reset: e-1;
}
h1 {
counter-increment: e-1;
counter-reset: e-2;
}
h1::before {
content: "第 " counter(e-1) " 章：";
}
h2 {
counter-increment: e-2;
}
h2::before {
content: "第 " counter(e-1) "." counter(e-2) " 节：";
}
随便再加点其他样式，就可以啦~
三、趣事一则 - linuxdo wiki
当初wiki站刚搭建起来的时候，里面有一个需求：就是让编号符合我们社区的等级，让其对应起来。但内置组件的编号是从1开始的！
正当我准备去重构一下这个内置的Steps组件时，发现了一个大宝贝！
是不是很眼熟，一下子就找到了症结所在 —— 内置了一个名叫step的计数器，但是没有给初始值！根据我们上面学的，不给默认值就是0！那么问题就变得比干饭还简单了，直接给样式重置一下初始值不就完了么！
多么的amazing啊！本打算重构的，结果一行CSS就搞定了！那是真的漂亮~
那么，本期分享就到这里了，有用的话给鹅点点赞、发发评论吧！
你可以在这里找到大鹅所有CSS知识分享哦
🔥【冷门知识】鹅のCSS大合集！长期追更~ 收藏 ≈ 学会
