嵌套有序列表必须将子ol作为父级li的直接子元素，否则浏览器会错误解析为独立列表导致编号重置；start和type属性各自作用于所在ol层级，互不干扰；推荐使用list-style-position:inside和margin-left控制缩进以保障可访问性与样式正确。

ol 嵌套不是“加个 ol 进去就行”，关键在于层级归属是否正确——子列表必须完整包裹在父级 li 内部，否则浏览器会自动闭合外层 ol，导致编号重置、语义断裂、样式错位。

嵌套必须写在 li 里面，不能写在 ol 直接子位置

常见错误是把子 ol 放在父 ol 下、但和 li 并列，例如：

<ol>
<li>主规则一</li>
  <ol type="a"><li>子规则</li></ol>
<li>主规则二</li>
</ol>

这会导致浏览器解析为两个独立的 ol，编号从 1 重新开始。正确写法是：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 子 ol 必须作为某个 li 的直接子元素（哪怕该 li 只包含一个子列表）
• 所有主干项都得是 li，不能用 p 或其他标签替代，否则破坏大纲结构
• 嵌套后，父 li 的内容可以是纯文本 + 子 ol，也可以是文本 + 子 ul 或 dl

start 和 type 在嵌套中各自生效，互不干扰

外层 ol start="34" 控制主编号起点，内层 ol type="a" 控制字母格式，两者不会冲突。但注意：

• start 只对外层 ol 有效，子 ol 的编号永远从 1 或 a 开始（除非显式设 start）
• type 值可选 "1"、"A"、"a"、"I"、"i"，大小写敏感，type="A" 是大写字母，type="a" 是小写
• 若子 ol 需要从 b 开始，必须写 <ol type="a" start="2"></ol>，不能靠父级推导

嵌套过深时，CSS 缩进和 list-style-position 很容易出问题

默认情况下，浏览器对嵌套 ol 的缩进是累积的，但 list-style-position: outside（默认值）在多层嵌套时可能让编号“悬空”或文字换行错位。实际建议：

• 用 list-style-position: inside 避免编号与文本分离，尤其当子项文本较长时
• 手动控制缩进：给不同层级 ol 设不同 margin-left，比如 ol ol { margin-left: 1.5em; }
• 避免用 padding 替代缩进，它会影响点击热区和屏幕阅读器播报范围

最容易被忽略的是：嵌套列表的可访问性依赖 DOM 结构完整性。如果子 ol 没包在 li 里，NVDA 或 VoiceOver 会跳过整个子层级，用户根本听不到那些子规则。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！