原生 ol 无法满足复杂编号需求，必须用 CSS counter 系统
当您需要在网页中为列表项添加自定义序号时，是否发现原生的 ol 标签功能有限？它仅能提供基础的阿拉伯数字编号。一旦面对更复杂的场景，例如需要实现跨列表连续编号、在序号前后插入文字或图标，或者生成诸如「第1章」、「附录A-1」等特殊格式，原生有序列表就显得力不从心了。
此时，CSS 的 counter 计数器系统便成为理想的解决方案。这套方法不依赖于特定的 HTML 标记，完全通过样式表控制计数逻辑，从而提供了极高的灵活性与定制能力。
为什么直接用 ol 不够用？
其根本原因在于，ol 生成的序号是一个不可拆分的语义化整体。开发者无法将序号与内容分离以进行独立的样式定位，也无法让序号在多个独立的列表容器间连续递增。此外，在序号前后添加前缀、后缀或图标，或者根据条件动态切换样式，都超出了原生有序列表的能力范围。因此，对于上述定制化编号需求，CSS counter 几乎是当前 Web 标准下的唯一选择。
counter-reset 和 counter-increment 怎么配对写？
要使计数器正常工作，counter-reset 和 counter-increment 这两个属性必须配对使用，缺一不可。您可以这样理解：counter-reset 负责初始化一个计数器（类似于声明变量 let i = 0），而 counter-increment 则在每个需要计数的元素上触发其值递增（相当于执行 i++）。它们通常不会写在同一个选择器内。
- 在父级容器（例如
ul或ol）上使用counter-reset: section;来创建一个名为“section”的计数器。 - 在每个子项（例如
li）上使用counter-increment: section;，使计数器在每个列表项前自动增加。 - 若希望从5开始计数，可写作
counter-reset: section 4;（请注意，此处设置的是“初始值减1”）。 - 此系统支持多个计数器同时运行，例如
counter-reset: chapter section;，它们会各自独立维护计数值。
如何用 counter() 函数渲染序号？
计数器递增后，序号并不会自动显示在页面上。您需要通过 ::before 伪元素配合 content 属性，调用 counter() 函数来输出序号。这一步是常见的出错点：遗漏 content 属性、拼错函数名，或忘记为伪元素设置 display 属性（这可能导致其不参与布局），都会使序号无法显示。
立即学习“前端免费学习笔记（深入）”；
li::before {
content: counter(section) ". ";
font-weight: bold;
}
counter() 函数还可接受第二个参数，用于指定序号的显示格式。例如，counter(section, upper-alpha) 将输出 A、B、C；counter(section, lower-roman) 将输出 i、ii、iii；默认格式为 decimal，即阿拉伯数字。
嵌套列表怎么保持层级编号？
要实现如「1.1」、「1.2」、「2.1」等多层级的嵌套编号，仅靠单一计数器是无法完成的。您需要为每一层级分别定义并管理独立的计数器：
- 在外层
ul上设置counter-reset: outer;，初始化外层计数器。 - 在内层
ul上设置counter-reset: inner;，初始化内层计数器。 - 在外层的每个
li上，同时设置counter-increment: outer;（递增外层计数）和counter-reset: inner;（重置内层计数器，为下一组子项做准备）。 - 在内层的每个
li上，设置counter-increment: inner;，递增内层计数。 - 最后，在内层
li的::before伪元素中，通过content: counter(outer) "." counter(inner) " ";将两层计数合并输出。
这里有一个关键细节需要注意：在子元素上书写 counter-reset 不会影响父级计数器的当前值，但会覆盖从父级继承而来的初始值。若忽略此特性，很容易导致嵌套编号出现意料之外的错乱。
