CSS中使用应用在伪元素中的计数器属性counter-increment

在CSS中，counter-increment 是一个用于递增计数器值的属性。它通常与 counter-reset 和 content 属性一起使用，以在文档中的特定位置（如列表项、标题等）插入自动生成的数字或符号。

counter-increment

1. 基本用法：

使用 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) ": ";
}

2. 指定增量值：

你可以指定一个增量值，而不是默认的0。

h2 {
    counter-increment: section 2; /* 每次递增2 */
}

3. 多个计数器：

你可以递增多个计数器，只需用空格分隔它们即可。

h2 {
    counter-increment: section 1 subsection; /* 递增section和subsection两个计数器 */
}

4. 与counter-reset结合使用：

通常，你会在文档的开始处使用 counter-reset 来重置计数器的值，然后在需要的地方使用 counter-increment 来递增它。

5. 与content和伪元素结合使用：

content 属性通常与 ::before 或 ::after 伪元素一起使用，以在元素的内容之前或之后插入计数器的值。

6. 计数器的作用域：

计数器的作用域是CSS的级联作用域。如果你在一个元素上重置或递增了一个计数器，那么该元素的所有后代元素都可以访问该计数器（除非它们在自己的作用域内重置了它）。

7. 继承性：

counter-increment 和 counter-reset 属性不是可继承的。这意味着它们不会影响元素的子元素，除非你在子元素上明确设置了这些属性。

8. 命名规范：

计数器名称是大小写敏感的，并且不能包含空格或特殊字符（除了连字符"-"）。

9. 浏览器兼容性：

大多数现代浏览器都支持 counter-increment 和相关的计数器属性。然而，一些较旧的浏览器可能不支持这些功能，因此在使用它们之前，最好检查目标浏览器的兼容性。

10. 示例用途：

• 自动编号的列表项
• 带有章节编号的文档标题
• 自定义编号的段落或其他元素

counter() 方法

counter() 是一个函数返回一个代表计数器的当前值的字符串，通常与 counter-reset、counter-increment 和 content 属性一起使用，以在文档中自动插入数字或序号。这通常用于创建列表、图表、目录或其他需要连续计数的元素。

语法

/* 简单使用 */
counter(计数器名称);

/* 更改计数器显示 */
counter(countername, upper-roman)

1. 通过上边定义后我们就开始插入计数器的值
   使用 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: " 等。

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 不同样式的序列样式，和嵌套计数器