ol列表编号不连续90%因dom结构非法导致自动重置：子ol/ul必须是li的直接子元素，中间插入div、section或漏闭合li均会使后续ol被当作新列表；同时需排查list-style被全局覆盖及start与value冲突问题。
ol 列表编号不连续，90% 是 DOM 结构非法导致的自动重置，不是 CSS 没配对、也不是浏览器 bug。
检查 li 是否直接子元素
浏览器只认 ol > li 这一路径；中间插了 div、section、空文本节点，甚至 JSX 中漏闭合 li，都会让后续 ol 被当作全新列表处理。
- 错误示例：
<ol><div> <li>A</li> <ol><li>B</li></ol> </div></ol>→ 子ol会被移出，独立计数 - 正确写法：所有嵌套
ol或ul必须是某个li的直接子元素 - Vue/React 动态渲染时，用
querySelectorAll('ol > li')检查数量是否匹配预期项数，能快速暴露结构断裂
排查 list-style 被全局覆盖
很多 UI 库（如 Bootstrap、Tailwind）默认设 ol, ul { list-style: none; }，且未在子级恢复。编号“消失”常是被静默干掉，而非没生成。
- 用浏览器开发者工具检查
ol元素的 computed 样式，看list-style-type是否为none - 临时加
ol { list-style: decimal !important; }测试——若编号恢复，说明是样式覆盖问题 - 嵌套时注意：
ol.nested ol也需要显式设list-style: lower-alpha等，不能只靠父级继承
验证 start 和 value 是否冲突
start 只影响第一个 li 的起始值，而 value 会强行覆盖单个项的编号，并打断后续自动递增逻辑。
-
<ol start="5"> <li>A</li> <li value="10">B</li> <li>C</li> </ol>→ 渲染为5. A→10. B→11. C，不是连续的 5→6→7 - 想跨多个
ol连续编号（如 34、35、36 → a、b、c），start和type都不够用，必须上 CSScounter-reset/counter-increment -
reversed单独用基本不可靠，尤其在 Safari 或存在value时，编号常回退成全 1.
最容易被忽略的是：编号不连续往往不是“样式没调好”，而是语义结构已损坏——它会影响屏幕阅读器朗读顺序、SEO 抓取层级、甚至 document.querySelectorAll('ol > li') 返回结果错位。修复优先级永远是 DOM 合法性 > CSS 控制 > JS 补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
