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

原生 ol 无法满足复杂编号需求，必须用 CSS counter 系统；需用 counter-reset 初始化、counter-increment 自增，配合 ::before 和 counter() 函数输出，并支持多级嵌套与格式控制。

为什么直接用 ol 不够用？

因为 ol 的序号是语义化且不可拆分的：你不能把序号和内容分开定位，也不能跨多个列表连续计数，更没法在序号里混入文字、图标或条件样式。比如「第1章」「附录A-1」「实验组①」这类需求，原生有序列表完全无能为力。

这时候必须用 CSS 的 counter 系统——它不依赖 HTML 结构，纯靠样式控制计数逻辑。

counter-reset 和 counter-increment 怎么配对写？

计数器要生效，两个声明缺一不可：counter-reset 初始化计数器（相当于 let i = 0），counter-increment 在每个元素上触发自增（相当于 i++）。它们通常不在同一个选择器里出现。

• 在父容器（如 ul 或 ol）上设 counter-reset: 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(section, upper-alpha) 输出 A、B、C；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;
• 内层 ::before 用 content: counter(outer) "." counter(inner) " ";

注意：counter-reset 在子元素上写不会影响父级计数器，但会覆盖继承来的初始值——这点常被忽略，导致嵌套编号错乱。