编号异常源于dom结构不合法：子必须作为父级的直接子元素，否则被重置为1.或a.；type属性仅控制单层样式，不继承；连续编号需css counters；嵌套建议≤3层并注意语义正确性。
编号异常不是浏览器 bug，是 DOM 结构不合法导致的自动重置——只要子 <ol></ol> 没包在父级 <li> 里，它就被当全新列表处理，永远从 A. 或 1. 开始。
子 ol 必须作为 li 的直接子元素
这是所有编号问题的根源。浏览器只认「<ol></ol> 是某个 <li> 的直接子节点」这种结构。一旦漏掉 <li>，哪怕视觉上对齐，DOM 就已断裂。
- 错误写法：
<ol type="A"></ol> <ol type="1"></ol>—— 两个兄弟<ol></ol>，第二层永远重置为 1. - 正确写法：
<ol type="A"><li>A. Item<ol type="1"><li>1. Sub</li></ol> </li></ol> - 验证方式：用 Chrome DevTools 选中内层
<ol></ol>，往上查父节点，必须能一路回溯到<li>，再回到外层<ol></ol>
type 属性只控制单层样式，不继承也不拼接
type="A" 和 type="1" 是独立作用于各自 <ol></ol> 的显示符号，不会自动组合成 “A.1” 或延续编号。想让第二层接着第一层字母走（比如 A. 下面是 a., b.），得靠 CSS counters。
-
<ol type="A"><li>A.<ol type="a"><li>a.</li></ol> </li></ol>→ 显示 A. / a.（不是 A.a.） - 想实现连续编号如 1.1、1.2，必须用
counter-reset+counter-increment+::before -
type属性在 IE9+ 全支持，但 CSS counters 在 IE11 及更早版本中部分失效，需 fallback
嵌套过深时缩进和可访问性会快速劣化
浏览器默认给每层 <ol></ol> 加 padding-left: 40px，嵌套三层后缩进明显偏右；更重要的是，屏幕阅读器对 >3 层的播报容易混乱，键盘用户 ArrowDown 也容易跳过中间层级。
- 缩进修复建议：
ol ol, ul ul { margin-left: 0; padding-left: 20px; } - 医疗/法律类强结构文档，建议 DOM 层级限制为 3 层，用 CSS counters 实现「A.1.a」语义
- 导航类树形菜单，优先用
role="tree"+role="treeitem"，而非靠<ol></ol>堆叠 - 每个
<li>必须有非空文本内容，空<li>会导致辅助技术跳过整段结构
最容易被忽略的，是把「分类 > 子类 > 标签」这类无序关系硬套进 <ol></ol>——这不是编号错了，是语义错了。该换 <ul></ul> 或 <nav></nav> 的时候，别靠 CSS 强撑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
