ol标签自动编号需满足li为直接子元素、未被list-style:none屏蔽、非空且display未破坏计数上下文；start设首项数字，type仅改符号；reversed只反向编号不反转dom；语义化需css counter或aria配合。
- 标签本身就能生成数字编号列表，只要结构合法、没被样式意外屏蔽，浏览器会自动递增渲染 —— 不需要 JS 计数，也不用写 CSS 伪元素模拟。
为什么 ol 没显示数字？常见结构和样式陷阱
不是所有「套了 ol」的 HTML 都能出编号，关键看是否满足浏览器的自动计数前提：
-
li必须是ol的直接子元素；写成ol > div > li或ol > p > li，编号就消失 - 全局或局部 CSS 中写了
ol { list-style: none; }，但没手动补回编号逻辑（比如用counter） -
ol是空的（没包含任何li），某些旧版 IE 或 XHTML 模式下会跳过渲染整个编号流 - 用了
display: flex或display: grid直接作用于ol，可能破坏内置计数上下文（尤其在 Safari 15.4 之前）
start 和 type 的实际行为与误用点
start 控制的是第一项显示的数字，不是“跳过前 N 项”；type 只改视觉符号，不改语义顺序：
-
<ol start="3"> <li>导出数据</li> <li>备份配置</li> </ol>→ 显示为 “3. 导出数据”、“4. 备份配置”，不是 “1. 导出数据” 后续接第 3 步 -
type="i"表示小写罗马数字，start="3"时第一项是iii，不是从i开始再跳过两项 -
type值不区分大小写，但建议统一用小写（type="a"而非TYPE="A"），避免部分校验工具报 warning - 动态插入新
li时，start不会重算；新增项仍按原序列 +1，不会自动对齐当前最大值
倒序编号：用 reversed 还是 JS 调换顺序？
reversed 只反转编号方向，不反转 DOM 顺序或可访问性顺序：
-
<ol reversed> <li>最新日志</li> <li>昨日日志</li> </ol>→ 渲染为 “2. 最新日志”、“1. 昨日日志”，但焦点流、屏幕阅读器读取顺序仍是li的原始 DOM 顺序 - 若真实需求是“最新项在最上方 + 编号从 1 开始”，仅靠
reversed不够；得用 JS 把li节点倒序重排，或服务端调整输出顺序 - IE 和 iOS Safari ≤12.2 不支持
reversed，降级方案需检测并 fallback 到 JS 排序或后端处理
要加“第X步”“第X章”？别硬改 ol，用 CSS counter
原生 ol 的 type 和 start 无法插入文字前缀；强行用 value 属性或内联文本会破坏语义和可维护性：
-
counter-reset必须设在ol上，counter-increment设在li上，缺一不可；否则counter(chapter)返回0 - 想从“第3章”开始，写
counter-reset: chapter 2（注意是起始值减一） -
li::before { content: "第" counter(chapter) "章 "; }中的空格会影响对齐，建议用white-space: pre或固定宽度控制 - 嵌套多级编号（如“2.3.1”）时，
counter支持多级 reset/increment，比手动维护value稳定得多
counter 配合 aria-label 显式声明。纯靠 start 或 value，只改了视觉，没改语义。
