子ol必须是li的直接子节点，否则浏览器会将其移至外层同级；用document.querySelectorAll('ol > li > ol')可验证合法嵌套，非空结果说明结构非法。
用 document.querySelectorAll('ol li ol') 检查子列表是否在 li 内部
浏览器对 ol 嵌套的合法性判断非常严格：子 ol 必须是父级 li 的直接子节点，否则会被视为全新列表，编号重置为 A. 而非 B.。你写的 <ol><li>A.</li><ol><li>1.</li></ol></ol> 实际解析后，第二个 ol 会“跳”到外层 ol 同级，变成两个并列列表。
运行以下查询能立刻暴露问题：
-
document.querySelectorAll('ol ol')→ 如果返回非空结果，说明子ol不在li里，结构非法 -
document.querySelectorAll('ol > li > ol')→ 应该覆盖所有合法嵌套；若数量明显少于视觉上的“缩进列表”，说明有漏包 -
[...document.querySelectorAll('ol')].forEach(ol => console.log(ol.outerHTML.slice(0, 80)))→ 快速扫一遍源码中ol出现的位置，看是否紧贴li开始
在 Elements 面板里确认 ol 是否被浏览器“踢出”li
别信源码缩进，信真实 DOM 结构。打开 Chrome DevTools → Elements → 找到一个看起来是“二级列表”的 ol，点击展开它的父节点。如果它不在某个 li 的子节点列表中，而是和那个 li 并列（同级、缩进相同），那就是已被浏览器自动修复过的真实证据。
常见视觉陷阱：
立即学习“前端免费学习笔记（深入）”；
- 你在源码里写了
<li>主项</li><ol><li>子项</li></ol>→ Elements 里看到的是两个兄弟节点，不是嵌套 - 用了注释或换行干扰解析：
<li>主项</li>
