ol未显示数字的主因是HTML结构非法或CSS覆盖：li必须为ol直接子元素，且需确保list-style未被重置；type属性仅支持5种固定值，复杂编号须用CSS计数器。
ol没显示数字，先查li是不是直接子元素
浏览器只认 ol 的直接子 li 为有效列表项。中间插个 div、section 或空格文本，DOM 就非法了——浏览器会自动纠错（比如把 li 提到 ol 外），但序号逻辑已失效，语义也丢了。
常见错误写法：<ol><div>第一步</div></ol> 或 <ol>第一步</ol>（纯文本无 li）。
- 用浏览器 DevTools 检查
ol下是否只有li节点（不含text节点） - Vue/JSX 动态渲染时，注意空状态分支漏写
li或未闭合标签 - 服务端模板（如 PHP、Jinja）中，循环体外多写了换行或注释，也可能被解析为 text 节点
list-style 被全局 CSS 清空了却没恢复
很多重置样式（如 * { margin: 0; padding: 0; }）或 UI 库（如 Bootstrap、Ant Design）会设 ol, ul { list-style: none; }，这会彻底禁用原生编号，且 type 和 start 属性全失效。
修复只需显式加回：ol { list-style-type: decimal; } 或更稳妥的 ol { list-style: decimal inside; }。
立即学习“前端免费学习笔记（深入）”；
- 别只写
list-style-type，list-style是 shorthand，能同时控制 type、position、image - 如果用了
display: flex或display: grid在li上，必须额外加list-style: inherit，否则标记隐式禁用 - 检查 computed styles，确认最终生效的
list-style-type值不是none
type="a" 不生效？大概率是 CSS 覆盖或拼写错误
type="a" 极其脆弱：只要任意一层 CSS 设了 list-style-type，它就退化为 decimal；而且只接受精确字符串 "a"，写成 "lower-a" 或 "a." 全部无效。
另外，type 只影响视觉，不改变可访问性顺序，也不支持括号、前缀、零填充等任何扩展。
- 想实现
a)、(a)这类格式，必须用ol { list-style-type: lower-alpha; }配合li::marker { content: counter(list-item) ") "; } -
type="A"和type="a"是独立值，大小写不互通；type="i"是小写罗马数字，不是斜体 - 嵌套时字母序号不会“延续”，只看是否严格
li > ol，并列两个ol就各自从 a 开始
需要“第1章”“附录B-3”这类编号？别硬改 type 属性
type 属性只支持 5 种固定模式（1、A、a、I、i），所有带文字、符号、多级联动的需求，都得切到 CSS 计数器方案。
手动在 HTML 里写 <li>第1章 内容</li> 看似快，但后续增删条目、批量改样式、导出 PDF、无障碍播报都会出问题。
- 基础写法：
ol { counter-reset: sec; }+li { counter-increment: sec; }+li::before { content: "第" counter(sec) "章 "; } - 起始值写法：
counter-reset: sec 2;表示从 3 开始（因为它是“重置为该值+1”） - 嵌套章节？给每层定义不同计数器名，比如
counter-reset: part; ol li { counter-increment: part; }，再配合counter(part, upper-roman)
最常被忽略的一点：一旦结构非法或 CSS 覆盖失控，ol 就不再是语义上的“有序列表”，而只是 div 堆砌——这会在无障碍测试、SEO 抓取、甚至 querySelectorAll('ol > li') 中持续制造偏差，而且越往后改越疼。
