应使用css counters实现多级编号。通过counter-reset和counter-increment定义计数器，配合content: counters(section, ".")生成“1.1”“1.1.1”等格式，原生嵌套无法自动继承父级编号。
HTML 有序列表嵌套时编号不连续怎么办
直接嵌套 <ol></ol> 不会自动继承父级编号（比如“1.1”“1.2”），浏览器默认每个 <ol></ol> 都从 1 开始。这不是 bug，是 HTML 规范行为——<ol></ol> 本身不带层级语义，只管自己这一层的计数。
- 想实现“1 → 1.1 → 1.1.1”这类编号，不能只靠原生
<ol></ol>嵌套 -
<ol type="1"></ol>、start属性只能控制起始数字，无法动态拼接上级编号 - 若强行用
start手动算数（比如第二层start="11"），维护成本高且语义错误
CSS counters 实现真正多级自动编号
用 CSS 的 counter-reset 和 counter-increment 配合 ::before 伪元素，才能可靠生成带点分隔的层级编号（如 1 → 1.1 → 1.1.1）。
- 外层
<ol></ol>设置counter-reset: section，内层用counter-reset: subsection - 每一级
<li>触发对应计数器自增：counter-increment: section或subsection - 用
content: counters(section, ".")拼接各级编号，“.” 是分隔符
ol {
counter-reset: section;
}
ol li {
counter-increment: section;
}
ol li::before {
content: counters(section, ".") ". ";
}
语义正确性比视觉更重要：何时该用 <ol></ol>，何时该用 <dl></dl>
如果列表项之间没有严格的顺序依赖（比如“配置项说明”“API 参数列表”），即使视觉上要编号，也不该硬套 <ol></ol>。误用会损害可访问性和 SEO。
- 纯展示型编号（如文档章节标题）→ 推荐用 heading 元素 + CSS counters，语义更准
- 真实步骤流程（安装→启动→验证）→ 必须用
<ol></ol>，再叠加 CSS counters 补充编号格式 - 参数名+说明类结构 → 用
<dl></dl>，编号只是样式需求，不应影响 DOM 结构
兼容性与可访问性注意点
CSS counters 在 IE8+ 和所有现代浏览器都支持，但屏幕阅读器对 ::before 生成的内容读取不稳定——部分只读文本，不读编号。
- 关键操作步骤必须确保编号逻辑同时存在于 DOM 中（例如用
<span class="num">1.1</span>），不能只靠 CSS - 若需完美无障碍支持，优先用 ARIA
aria-setsize/aria-posinset配合 JS 动态写入编号 - 不要依赖
list-style-type: decimal的嵌套行为，它不产生点分编号，仅改变符号类型
<ol><ol></ol></ol> 嵌套就能出“1.1”，结果白调半天 CSS。真要多级编号，counter 是绕不开的一关，而且得手动控制重置和拼接逻辑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
