原生 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（否则可能不占布局）。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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 在子元素上写不会影响父级计数器，但会覆盖继承来的初始值——这点常被忽略，导致嵌套编号错乱。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！