在CSS中，counter-increment 是一个用于递增计数器值的属性。它通常与 counter-reset 和 content 属性一起使用，以在文档中的特定位置（如列表项、标题等）插入自动生成的数字或符号。
counter-increment
- 基本用法：
使用 counter-increment 可以设置一个递增计数器的值。默认情况下，计数器的值是0，并且每次递增1。但你可以指定一个不同的增量值。
h1 {
counter-reset: section; /* 重置计数器 */
}
h2 {
counter-increment: section; /* 递增计数器 */
content: "Section " counter(section) ": "; /* 使用计数器的值 */
/* 注意：content 属性通常与 ::before 或 ::after 伪元素一起使用 */
}
h2::before {
content: "Section " counter(section) ": ";
}
- 指定增量值：
你可以指定一个增量值，而不是默认的0。
h2 {
counter-increment: section 2; /* 每次递增2 */
}
- 多个计数器：
你可以递增多个计数器，只需用空格分隔它们即可。
h2 {
counter-increment: section 1 subsection; /* 递增section和subsection两个计数器 */
}
- 与counter-reset结合使用：
通常，你会在文档的开始处使用 counter-reset 来重置计数器的值，然后在需要的地方使用 counter-increment 来递增它。
- 与content和伪元素结合使用：
content 属性通常与 ::before 或 ::after 伪元素一起使用，以在元素的内容之前或之后插入计数器的值。
- 计数器的作用域：
计数器的作用域是CSS的级联作用域。如果你在一个元素上重置或递增了一个计数器，那么该元素的所有后代元素都可以访问该计数器（除非它们在自己的作用域内重置了它）。
- 继承性：
counter-increment 和 counter-reset 属性不是可继承的。这意味着它们不会影响元素的子元素，除非你在子元素上明确设置了这些属性。
- 命名规范：
计数器名称是大小写敏感的，并且不能包含空格或特殊字符（除了连字符"-"）。
- 浏览器兼容性：
大多数现代浏览器都支持 counter-increment 和相关的计数器属性。然而，一些较旧的浏览器可能不支持这些功能，因此在使用它们之前，最好检查目标浏览器的兼容性。
- 示例用途：
- 自动编号的列表项
- 带有章节编号的文档标题
- 自定义编号的段落或其他元素
counter() 方法
counter() 是一个函数返回一个代表计数器的当前值的字符串，通常与 counter-reset、counter-increment 和 content 属性一起使用，以在文档中自动插入数字或序号。这通常用于创建列表、图表、目录或其他需要连续计数的元素。
语法
/* 简单使用 */
counter(计数器名称);
/* 更改计数器显示 */
counter(countername, upper-roman)
- 通过上边定义后我们就开始插入计数器的值
使用content属性和counter()函数将计数器的值插入到元素的伪元素（如::before或::after）中。
h1::before {
content: "Section " counter(section) ": "; /* 在 h1 元素前插入 "Section X: "，其中 X 是 "section" 计数器的当前值 */
}
完整的示例：
.box-1{
/* 重置一个名为 "my-counter-1"计数器，并且从0开始 */
counter-reset: my-counter-1;
}
.box-1 p::before {
/* 每次使用计数器的时候都会自动增加1,这里从开始为0+1，所以就是1开始显示
increment字面意思是递增 */
counter-increment: my-counter-1;
content: "基础 " counter(my-counter-1) "、 ";
}
<div class="box-1">
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>Bootstrap</p>
<p>Vue</p>
<p>React</p>
<p>jQuery</p>
</div>
在上面的示例中，每个 p 元素前都会自动插入一个序号，如 "基础 1: "、"基础 2: " 等。
- 您还可以给counter方法传递第二个参数来改变序列的类型
我们可以设置计数器类型，罗马数字
<div class="box-2">
<h4>JavaScript</h4>
<p>Prototype</p>
<p>jQuery</p>
<p>Backbone.js</p>
<p>require.js</p>
<p>vue.js</p>
<p>react.js</p>
<p>angular.js</p>
</div>
.box-2{
counter-set: romanNumber;
}
.box-2 p::before{
counter-increment: romanNumber;
content: counter(romanNumber, upper-roman) ". ";
}
上边的案例我们通过给counter方法传递第二个参数upper-roman来设置序列为罗马数字序列
counter支持的类型和list-style-type一样
counters() 方法
counters() 是一个嵌套计数器，返回表示指定计数器当前值的连接字符串。counters() 函数有两种形式：
- counters(name, string)
- counters(name, string, style)。
它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。生成的文本是具有给定名称的所有计数器的值，从最外层到最内层，之间由指定字符串分隔。计数器以指示的样式呈现，如果未指定样式，则默认为十进制。
语法：
/* 简单用法-样式默认为十进制，并且后边跟一个“-”连接 */
counters(countername, '-');
/* 改变计数器显示样式为罗马字符，并且后边跟“.”连接 */
counters(countername, '.', upper-roman)
最后贴上案例查看：
- https://jsrun.net/QyDKp 计数器基本使用
- https://jsrun.net/kWDKp/edit 不同样式的序列样式，和嵌套计数器