CSS如何给列表项添加自定义序号_使用counter计数器属性实现

原生 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 不会影响父级计数器的当前值，但会覆盖从父级继承而来的初始值。若忽略此特性，很容易导致嵌套编号出现意料之外的错乱。