- counter-increment 属性允许开发人员动态增加或减少名为 counter 的 CSS 变量的值。
- 有效的编号需要结合使用计数器重置来初始化计数，以及使用 counter() 函数来呈现值。
- 高级用法包括使用 counters() 函数进行嵌套计数器，以及使用罗马数字或字母列表进行自定义格式设置。
你是否曾经面对一篇长篇文档，希望能够自动为标题编号，而无需每次添加新章节时都手动输入“1、2、3”？幸运的是，CSS 内置了实现此功能的方法。你可以将 CSS 计数器视为内部变量，它们会在浏览器渲染页面时跟踪编号，从而让你创建能够动态更新的列表和序列。
虽然这看起来像是需要 JavaScript 才能实现的功能，但这些工具是浏览器原生支持的，而且非常轻量级。通过将计数器递增与其他属性结合使用，您可以将普通的 HTML 元素转换为结构化的编号序列，从而让用户更容易浏览您的内容，同时保持标记的简洁性和语义化。
核心机制：工作原理
要让这些计数器正常工作，不能只使用一个属性；你需要一组 CSS 规则协同工作。首先是`counter-reset`，它就像一个起点。它会初始化一个带有特定名称的计数器，还可以选择性地设置一个起始数字。如果没有提供起始数字，则默认为 0。例如，如果你希望第一个项目的起始值为 1，则需要在项目显示之前将其重置为 0。
接下来是重头戏：`counter-increment`属性。该属性指示浏览器在每次遇到特定选择器时，将指定名称的计数器值加 1。默认情况下，计数器加 1，但您可以指定任何整数。如果您使用负数，例如 -1，计数器实际上会反向计数，这对于创建倒计时或反向列表非常实用。如果您需要阻止计数器在特定区域递增，只需将其设置为 ` none`即可。
将数字呈现在屏幕上
初学者容易犯的一个错误是…… 计数器是不可见的 默认情况下，它们只是浏览器内存中的一些数字。要真正看到它们，您必须使用…… 内容属性通常在内部 ::before or ::after 伪元素。这是…… counter() 函数 这时就需要用到这个函数，它会检索变量的当前值并将其打印为文本。
- 基本实现： 选择要编号的元素，然后应用
counter-increment，然后使用content: counter(name);在伪元素中。 - 自定义字符串： 你不仅限于数量。你可以 连接文本，如
content: \"Step \" counter(my-counter) \": \";营造更专业的形象。 - 设置输出样式： 您可以通过向函数传递第二个参数来改变数字的显示方式。例如： 上罗马 会给出罗马数字，而 低阿尔法 提供一份按字母顺序排列的清单。
先进技术和实际应用案例
如果您正在处理 嵌套结构就像目录中有第 1、1.1 和 1.1.1 节一样，仅仅使用一个计数器是不够的。这就是…… counters() 函数 （复数形式）简直是救命稻草。与单数形式不同， counters() 可以跟踪多个嵌套层级和 用绳子把它们连接起来例如使用句点来创建层级编号系统。
一个非常实际的应用是添加 行号到代码块当使用不支持自动编号的语法高亮器时，可以使用 CSS 来定位代码行。通过重置计数器，可以实现这一点。 <pre> 标签并在每个周期递增它 .line 类，你创建一个 无缝编号列 无需修改你的 JavaScript 逻辑。
另一个巧妙的技巧是 数兄弟姐妹 它们在技术上并非嵌套的。如果您有一系列 <h2> 和 <h3> 标签，你可以创建 <h2> 重置 <h3> 计数器。这将创建一个 逻辑顺序 每次出现新的主标题时，子标题都会从 1 重新开始计数，即使它们在 DOM 中都是同级元素。
关于无障碍设计的一点说明
虽然使用 CSS 计数器使任何一组 div 看起来像一个列表很诱人，但你应该小心。 语义化 HTML 才是王道如果内容在逻辑上是一个列表，则使用 <ol> 和 <li>使用 CSS 来模拟列表非常适合 视觉装饰 或者给标题添加编号，但这不应该取代屏幕阅读器用来有效导航页面的底层结构。
通过利用计数器重置、计数器递增和 `counter()` 函数，您可以摆脱静态编号，采用动态系统，让系统自动处理所有计算。无论您是构建包含嵌套章节的复杂技术手册，还是仅仅为博客代码片段添加一些润色，这些工具都能为您提供一种强大而高效的方式，直接在样式表中处理排序。
