ol标签在HTML5中仅支持reversed和start两个专有属性,type属性已过时;可靠序号控制须用CSS counter,需在ol设counter-reset、li设counter-increment、li::before用content插入。

ol 标签在现代 HTML 中只保留了极少数原生属性,且多数已被废弃或仅作语义提示用。直接靠 type 和 start 实现“自定义序号”已不可靠,真要控制显示效果,得靠 CSS。
ol 的合法 HTML5 属性只有这两个
根据 HTML5 规范,ol 元素**仅支持全局属性**(如 class、id、data-* 等)和以下两个专有属性:
-
reversed:布尔属性,表示倒序编号(从大到小),例如<ol reversed><li>A</li><li>B</li></ol>渲染为 2. A、1. B -
start:数值型属性,指定起始编号值,例如<ol start="100"><li>第一条</li></ol>显示为 “100. 第一条”
type 属性虽仍被多数浏览器支持,但HTML5 已将其标记为“过时(obsolete)”,W3C 明确不鼓励使用——它只影响渲染,不改变语义,且无法与 CSS 计数器协同。
type 属性为什么不能信
常见错误现象:<ol type="a" start="3"> 在 Chrome 中可能正常显示 c、d、e,但在 Safari 或旧版 Firefox 中可能回退为数字,或忽略 start 值。
立即学习“前端免费学习笔记(深入)”;
- HTML5 标准中
type不再是规范属性,浏览器实现完全自愿 - 当页面启用
prefers-reduced-motion或某些无障碍模式时,type可能被强制忽略 - 与 CSS
counter-increment冲突:若同时用type="A"和 CSS 计数器,最终序号行为不可预测 - 无法表达“第1章”“附录B-2”这类复合格式,纯属硬编码局限
真正可控的序号方案:CSS counter
这是目前唯一跨浏览器、可维护、符合语义的方案。核心三步缺一不可:
-
ol上必须设counter-reset: section;(初始化计数器) -
li上必须设counter-increment: section;(每次递增) -
li::before中用content: "第" counter(section) "节";插入文本
示例代码:
ol { counter-reset: section; }
ol li { counter-increment: section; }
ol li::before {
content: "第" counter(section) "节 ";
font-weight: bold;
}注意:counter-reset: section 2 表示从 3 开始计数(值是“起始前一个数”),不是“从2开始”。
嵌套 ol 时容易漏掉的关键点
嵌套本身合法,但语义和样式极易混乱:
- 子
ol默认继承父级counter-reset,导致子列表也从 1 开始——需显式重置:ol ol { counter-reset: subsection; } -
li是唯一合法子元素,所有内容(包括另一个ol)必须包裹在li内,否则解析为 DOM 错误 - 用
data-chapter="3"等属性存业务数据比依赖start更可靠,尤其当列表项动态增删时
最常被忽略的是:计数器名称作用域是块级容器,ol 没设 counter-reset,子 ol 就不会自动新建计数器——它会继续用父级的,结果全串号。



















