嵌套有序列表必须用li包裹内层ol,否则破坏语义且影响可访问性;编号类型不继承,需用CSS控制;start和reversed仅作用于当前层,跨层续编需CSS counters。

ol 嵌套必须用 li 包裹内层 ol
直接把 <ol> 写在另一个 <ol> 里会破坏语义结构,浏览器可能忽略嵌套或报解析警告。正确做法是:内层 <ol> 必须作为某个 <li> 的子内容存在。
- 错误写法:
<ol><li>一级</li><ol><li>二级</li></ol></ol>(<ol>不在<li>里) - 正确写法:
<ol><li>一级<ol><li>二级</li></ol></li></ol> - 每个嵌套层级都应有明确的父级
<li>,否则屏幕阅读器无法识别层级关系
嵌套时编号类型默认不继承,需手动控制
外层 <ol> 用数字,内层不会自动变成字母——浏览器对嵌套 <ol> 的 list-style-type 不做默认降级处理。你看到的“1 → a → i”效果,全是 CSS 控制的,不是 HTML 自带行为。
- HTML5 已废弃
type属性,不要用<ol type="a">;改用 CSS:ol ol { list-style-type: lower-alpha; } - 三层嵌套常见组合:数字 → 小写字母 → 小写罗马数字,对应 CSS:
ol { list-style-type: decimal; } ol ol { list-style-type: lower-alpha; } ol ol ol { list-style-type: lower-roman; } - 如果只靠 HTML 属性(如
start或reversed),它们只作用于当前<ol>,不影响子层
嵌套 ol 的可访问性陷阱:缺少语义锚点易被跳过
当用户用键盘 Tab 或屏幕阅读器浏览时,嵌套的 <ol> 若没有清晰的 <li> 包裹和合理缩进,会被当作孤立列表处理,导致导航断裂或编号错乱。
- 确保每层
<li>都有实际文本内容,避免空<li>作为占位符 - 用 CSS 设置
padding-left或margin-left显式体现缩进,不能只靠默认样式——某些读屏软件依赖视觉缩进推断层级 - 不要用
<div>或<span>替代<li>来“模拟”嵌套,这会让<ol>失去语义完整性
多级 ol 嵌套时 start 属性只对当前层生效
start 是单层属性,它不会穿透到子 <ol>。比如外层设 start="3",内层仍从 1 开始,除非你显式给内层也加 start。
立即学习“前端免费学习笔记(深入)”;
- 示例:
<ol start="3"><li>第三步<ol start="10"><li>第十小步</li></ol></li></ol>→ 外层显示 “3.”,内层显示 “10.” - 若想让内层延续外层计数(如 3.1、3.2),必须用 CSS counters 实现,纯 HTML 无法做到
- 注意:
reversed同样只作用于声明它的那一层<ol>
<li> 包裹,就可能让辅助技术完全读丢整段逻辑。



















