HTML编写ol列表没有序号？标签缺失排查技巧-html教程-PHP中文网

ol未显示数字的主因是HTML结构非法或CSS覆盖：li必须为ol直接子元素，且需确保list-style未被重置；type属性仅支持5种固定值，复杂编号须用CSS计数器。

html编写ol列表没有序号？标签缺失排查技巧

浏览器只认 ol 的直接子 li 为有效列表项。中间插个 div、section 或空格文本，DOM 就非法了——浏览器会自动纠错（比如把 li 提到 ol 外），但序号逻辑已失效，语义也丢了。

常见错误写法：

第一步

或 第一步（纯文本无 li）。

很多重置样式（如 * { 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 设了 list-style-type，它就退化为 decimal；而且只接受精确字符串 "a"，写成 "lower-a" 或 "a." 全部无效。

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

另外，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 开始

type 属性只支持 5 种固定模式（1、A、a、I、i），所有带文字、符号、多级联动的需求，都得切到 CSS 计数器方案。

手动在 HTML 里写

第1章内容

看似快，但后续增删条目、批量改样式、导出 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') 中持续制造偏差，而且越往后改越疼。