html有序列表多层嵌套的核心规则是子必须作为父的直接子元素，否则编号重置、语义断裂、可访问性失效；type属性仅控制当前层显示符号，连续编号需css counters实现。
HTML 有序列表的多层项目管理，核心就一条：子 <ol></ol> 必须作为父级 <li> 的直接子元素，否则编号重置、语义断裂、可访问性失效——不是样式问题，是结构违法。
嵌套必须写在 <li> 内部，不能悬空或并列
浏览器只认 DOM 层级关系，不看缩进或视觉对齐。一旦把子 <ol></ol> 放到父 外面，它就被当成全新列表，编号必然从 1 或 A 开始。
- ❌ 错误：
<ol type="A"><li>A. Item</li></ol> <ol type="1"><li>1. Sub</li></ol>（两个兄弟<ol></ol>） - ✅ 正确：
<ol type="A"><li>A. Item<ol type="1"><li>1. Sub</li></ol> </li></ol>（子<ol></ol>是<li>的子节点） - 验证方式：用开发者工具检查 DOM，确认子
<ol></ol>是否位于父<li>标签内部，且中间无其他元素或空白文本节点
type 属性只改显示符号，不控制计数逻辑
type="a" 或 type="1" 不会让第二层“接着第一层编号”，它只决定当前这一层用什么字符显示。比如 A. 下的 1.，永远从 1 开始，哪怕上一章已到第 12 条。
- 想实现
34.→34.1→34.1.a这类连续编号，必须用 CSScounter-reset/counter-increment+::before -
start属性仅对外层有效，例如<ol start="34"></ol>可让首项显示为34.，但无法让内层自动带上前缀 - IE11 及更早版本对 CSS counter 支持不全，若需兼容，优先用纯
type方案（如 A. → 1. → a.），并接受每层独立计数
缩进异常不是 bug，是 padding-left 累加的结果
嵌套越深，列表越靠右？这是浏览器默认给每个 <ol></ol> 和 <ul></ul> 设置 padding-left: 40px 导致的叠加效果，不是 HTML 写错了。
- 不要用
text-indent修复——它只缩进首行，多行内容会错位 - 推荐显式重置：
ol ol, ul ul { margin-left: 0; padding-left: 20px; } - 如果用了
normalize.css或其他 reset，先查它是否覆盖了ul/ol的默认padding - 移动端无需担心，但企业内网若仍跑 IE9–11，
counter类方案要 fallback
最容易被忽略的，是层级和语义意图的错位：用 <ol></ol> 套 <ol></ol> 表达步骤中的子步骤没问题，但用来表达「分类 > 子类 > 标签」就违背了有序列表本意——这时候该换 <ul></ul> 或直接用 <nav></nav> + role。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
