ol的start属性仅改变首项编号值,不跳过li元素;reversed仅倒序编号,不改变DOM顺序和语义。二者均不能用于数据重排或分页,误用会导致可访问性问题与逻辑混乱。

start 和 reversed 是 ol 的两个原生属性,但它们干的不是同一件事:前者控制“第一个显示几”,后者只改编号方向,不碰 DOM 顺序。别指望靠它们实现数据重排或分页跳转。
为什么start="5"不等于“从第5项开始渲染”
浏览器不会跳过任何 li 元素,start 只影响第一个 li 的视觉编号,后续自动 +1。比如:
<ol start="5"> <li>A</li> <li>B</li> </ol>
渲染结果是:5. A、6. B,不是“第5个才出现 A”。常见误用包括:
- 当成服务端分页参数,结果列表内容全在,只是编号偏移了
- 传非整数如
start="5.2"或start="c",前者被截为5,后者退化为默认1 - 和
type="a"混用时,误以为start="c"合法——其实必须是整数,start="3"对应字母序列的第3个(即c)
reversed 只倒编号,不倒 DOM
reversed 是布尔属性,存在即生效。它让编号递减,但 li 在 DOM 中仍是原始顺序,焦点顺序、屏幕阅读器朗读顺序也完全不变。例如:
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记(深入)”;
<ol reversed start="5"> <li>A</li> <li>B</li> <li>C</li> </ol>
显示为:5. A、4. B、3. C,不是 5. C、4. B、3. A。关键限制有:
- 旧版 Safari(iOS 12.2 之前)和 IE 不支持,需降级 fallback
- 动态增删
li时,start不会自动重算,得手动调ol.setAttribute('start', newStart) - 和
type="I"配合时,reversed会让编号变成V, IV, III...,但罗马数字没有标准“倒序映射”,易引发歧义
别用value给start打补丁
value 是 li 的属性,只覆盖单个项的编号,之后仍按此值 +1 递增。它和 start 共存时,start 仅对第一个没设 value 的 li 生效。典型陷阱:
- 写
<ol start="10"><li value="1">A</li></ol>→ 显示1. A,彻底绕过start,语义断裂 - 编号错乱后挨个加
value修复 → 实际该查是否漏闭标签、嵌套混乱,或 JS 意外移动了节点 - 想靠
value实现“最新在前”的逻辑 → 真需求是数据倒序,该在 JS 或后端反转数组再生成ol
最常被忽略的一点:如果编号承载语义(比如操作步骤、法律条文序号),reversed 只改视觉,不改语义顺序——此时用它反而会造成可访问性风险。真正要倒序展示,优先选数据层反转,而非呈现层“骗编号”。


















