编号错乱源于手动写数字破坏自动计数机制，start属性仅设起始值不修复结构，嵌套需css计数器实现层级编号，js操作后需触发重排才能更新编号。
为什么 <ol></ol> 里手写数字会错乱
浏览器对 <ol></ol> 的编号是自动计算的，不是读取你写的文字内容。一旦在 <li> 里手动写“1. 第一步”“2. 第二步”，实际 DOM 中就变成两个纯文本节点，编号逻辑彻底失效——结果常是“1. 1. 第一步”“1. 2. 第二步”，或者编号全变成 1。
start 属性只解决起始值，不修复结构错误
想从第 5 条开始编号？用 start="5" 没问题：<ol start="5">
<li>第五项</li>
<li>第六项</li>
</ol>。但它只影响第一个 <li> 的计数起点，后续仍按顺序 +1。常见误用：
- 在中间插入
<ol start="10"></ol>却没重置计数上下文（比如没关前一个<ol></ol>）→ 编号跳变或重复 - 嵌套
<ol></ol>时，子列表也用了start，但父级没设type或 CSS 控制 → 浏览器可能降级为 decimal，导致 “1.1, 1.2” 变成 “1, 2” -
start值必须是整数，传字符串如start="five"会被忽略，回退到 1
嵌套有序列表时编号层级断掉的真正原因
浏览器默认不自动生成 “1.1、1.2” 这类复合编号；它只做单层计数。所谓“嵌套编号”其实是 CSS 的 counter-reset / counter-increment 在起作用。原生 HTML 的 <ol></ol> 嵌套只是 DOM 结构嵌套，编号样式需额外控制：
- 子
<ol></ol>必须严格放在父级某个<li>内部，不能挂在父<ol></ol>下——否则语义断裂，CSS 计数器无法关联 - 若要 “1.1, 1.2, 2.1”，得用 CSS：
ol { counter-reset: item; } li { counter-increment: item; } li::before { content: counters(item, ".") ". "; } - 仅靠
type="a"或type="i"无法跨层级联动，这些属性已被现代项目弃用，兼容性差且不可控
JS 动态操作 <ol></ol> 时编号丢失的隐性陷阱
用 document.createElement('li') 插入新项后，编号没更新？不是 JS 错，是浏览器不会自动 reflow 计数器。关键点：
- 插入后必须触发 layout 重排（比如读取
offsetHeight），或等下一个 repaint 周期，编号才刷新 - 用
innerHTML替换整个<ol></ol>内容时，旧计数器状态丢失，新内容从 1 开始——哪怕你写了start="7"，也要确保该属性在替换后的 HTML 字符串里存在 - 用
insertAdjacentHTML往<ol></ol>末尾加<li>，如果没闭合标签（如漏了 ），整个插入片段可能被解析为文本，编号直接消失
<li> 节点是否被浏览器识别为同一 <ol></ol> 的合法子元素。任何结构松动（缺闭合、错嵌套、非法父级）、任何手动覆盖内容的行为，都会让自动编号系统“失联”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
