掌握 <ol> 的关键是理解顺序语义与浏览器默认行为的边界：仅当列表项存在不可交换的先后关系时才必须使用 <ol>，如食谱步骤、法律条文等；误用 type、忽略嵌套规则或不当 CSS 覆盖会破坏可访问性。
直接说结论：掌握 <ol> 的关键不是背属性，而是理解「顺序语义」和「浏览器默认行为之间的边界」——绝大多数问题出在误用 type、忽略嵌套规则，或用 CSS 覆盖时破坏可访问性。
什么时候必须用 <ol> 而不是 <ul>
判断依据只有一个：列表项之间是否存在不可交换的先后关系。比如「安装步骤第 2 步必须在第 1 步之后执行」，或「比赛第 3 名不能和第 1 名调换位置」。
- ✅ 正确场景：
<ol>用于食谱步骤、表单填写指引、法律条文编号、搜索结果排名 - ❌ 错误场景：把导航菜单、标签云、新闻标题列表硬套
<ol>—— 它们本质无序，用<ul>更准确，也更利于屏幕阅读器识别 - ⚠️ 注意：
<ol reversed>不等于「倒着写 HTML」，它只是视觉倒序（如 5→4→3→2→1），DOM 顺序仍是正向的，这对键盘焦点流和辅助技术很重要
start 和 type 的实际限制
start 看似简单，但容易被当成“跳过前几项”的快捷方式；type 在现代开发中基本已被 CSS 取代，且存在兼容陷阱。
-
start="5"只影响第一个<li>的显示编号，后续仍按自然序列递增（5, 6, 7…），不会自动对齐后文逻辑 -
type="A"或type="i"在部分旧版 Safari 和某些邮件客户端中渲染异常，且无法控制大小写或前导零（比如想显示 "01", "02"） - 真正可控的方式是用 CSS
list-style-type+counter-reset，例如：ol { counter-reset: step 4; } ol li::before { counter-increment: step; content: counter(step) ". "; }这样才能精确控制起始值和格式
嵌套 <ol> 的唯一合法结构
嵌套不是为了视觉缩进，而是表达「子步骤属于上一级步骤」的层级语义。HTML 规范强制要求：所有 <li> 必须直接包裹内容，子列表必须放在某个 <li> 内部，不能挂在 <ol> 下面。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合法：
<ol><li>准备材料<ol><li>面粉</li><li>鸡蛋</li></ol></li><li>开始搅拌</li></ol>
- ❌ 非法：
<ol><li>准备材料</li><ol><li>面粉</li></ol></ol>
—— 第二个<ol>没被<li>包裹，解析为两个独立列表，语义断裂 - ⚠️ 注意：嵌套后默认编号会重置（内层从 1 开始），若需连续编号（如 1.1, 1.2, 2.1），必须用 CSS counters 手动实现，原生 HTML 不支持
最常被忽略的一点：即使你用 CSS 把 <ol> 的数字全隐藏了（list-style: none），只要 DOM 结构仍是 <ol><li>，屏幕阅读器仍会读出「列表，共 3 项，第 1 项……」——这是语义留存的价值，也是为什么不能为图省事而用 <div> 模拟序号。
