子ol总是从1开始，根本原因是未嵌套在li内而是与li平级，导致浏览器中断外层列表、重置计数器；正确结构必须是<ol><li>主项<ol><li>子项</li></ol></li></ol>。
为什么ol子列表总是从1开始？
根本原因是子ol没被正确包裹在li里，而是和li平级放在外层ol中。浏览器一看到这种结构，就自动切断前一个列表、开启新ol，计数器重置为1。
检查时重点看DOM树：打开Chrome DevTools → Elements面板 → 展开外层ol，如果子ol直接挂在ol下（和li同级），就是错的；它必须嵌套在某个li内部。
- 错误写法：
<ol><li>主项</li><ol type="a"><li>子项</li></ol></ol> - 正确写法：
<ol><li>主项<ol type="a"><li>子项</li></ol></li></ol> - 用
document.querySelectorAll('ol > ol')查一遍，如果有结果，基本就是嵌套位置错了
start属性不生效的常见原因
start只对外层ol起作用，且只影响第一个li显示的数字；它不会“跳过”前面的编号，也不会修正因嵌套错误导致的计数中断。
- 如果外层
ol里混了p或div，浏览器会提前闭合ol，start就只作用于被截断后剩下的那小段 -
start="34"写成start=34（缺引号）在HTML5中虽能解析，但部分校验工具会警告，建议统一加双引号 - 用CSS强制设置
counter-reset会覆盖start行为，调试时先禁用相关样式
怎么快速验证嵌套是否合法？
别信源码缩进，要看浏览器实际生成的DOM结构。右键元素 → “Edit as HTML”，随便改个空格再回车，如果节点位置突然跳变，说明原始嵌套不被规范允许。
立即学习“前端免费学习笔记（深入）”；
- 运行
document.querySelectorAll('ol li ol').forEach(el => console.log(el.parentElement.textContent.trim().slice(0,20)))，确认每个子ol确实属于某条主规则文本内 - 用W3C Validator（validator.w3.org）提交片段，它会明确报错：“Element ol not allowed as child of element ol in this context”
- VS Code装HTMLHint插件，启用
attr-validate和doctype-first规则，保存时实时标红
嵌套后样式错乱或文字溢出怎么办？
这不是CSS问题，是语义结构塌陷的副作用。当ol被浏览器强行拆解，li丢失父级上下文，CSS中依赖ol > li或ol ol的选择器就失效了。
- 移除所有包裹
li的div或p——主干内容必须直接写在li里，否则li语义断裂 - 避免给
li设display: block以外的值，尤其慎用flex或grid，容易干扰默认列表布局流 - 子
ol的type="a"等属性必须写在ol标签上，不能靠JS动态加，否则初始渲染时序不对
