reversed属性是HTML5原生倒序编号最直接方法,需配合start属性确保稳定显示(如4. 3. 2. 1),仅用reversed依赖浏览器隐式推算易出错;它只改变编号方向而不调整DOM顺序,屏幕阅读器仍按原始顺序朗读,且IE完全不支持。

使用 reversed 属性是最直接的方法
HTML5 原生支持倒序编号,只需在 <ol> 标签上添加 reversed 属性即可。浏览器会自动从最大数字开始递减(如 5, 4, 3…),无需手动写死编号或用 CSS 伪造。
注意:该属性是布尔属性,只写 reversed 就生效,不推荐写成 reversed="true" 或 reversed="reversed",虽然部分浏览器也认,但不符合规范。
示例:
<ol reversed> <li>最后一项</li> <li>中间项</li> <li>第一项</li> </ol>
渲染结果为:
5. 最后一项
4. 中间项
3. 第一项
立即学习“前端免费学习笔记(深入)”;
start 属性决定起始编号,配合 reversed 控制起点值
仅加 reversed 时,浏览器按子元素个数自动推算起始值(比如 3 个 <li> 就从 3 开始)。若需自定义起始数字(例如从 10 开始倒数),必须显式设置 start 属性。
-
start的值必须是整数,可为正、负或零 - 当同时使用
reversed和start="8",列表首项显示 8,次项为 7,依此类推 - 如果
start小于实际项数,后续编号会变成 0、-1、-2…,这是合法行为,但容易引发语义混淆
示例(从 6 开始倒数):
<ol reversed start="6"> <li>导出数据</li> <li>校验格式</li> <li>读取文件</li> </ol>
结果:
6. 导出数据
5. 校验格式
4. 读取文件
不要用 CSS 的 counter-reset 模拟倒序
有人尝试用 CSS 的 counter 系统手动控制编号顺序,比如 counter-reset: item 5; 再配合 counter-increment: item -1;。这种写法虽能视觉上实现倒数,但存在明显问题:
- 屏幕阅读器无法识别倒序逻辑,仍按 DOM 顺序播报“第 1 项、第 2 项…”
- 打印或 PDF 导出时,CSS 计数器可能失效或错位
- 若列表动态增删
<li>,需同步更新 CSS 计数器,维护成本高 - 不支持无障碍访问的
aria-relevant或aria-live场景
除非有极特殊兼容性要求(如必须支持 IE9 及更早版本),否则应优先使用原生 reversed + start。
兼容性与实际限制
reversed 属性在所有现代浏览器(Chrome 12+、Firefox 15+、Safari 6+、Edge 12+)中均稳定支持。唯一需要注意的是:
- IE 完全不支持
reversed,若项目仍需兼容 IE,只能退回到 JS 动态写value属性或服务端生成编号 -
<li>的value属性会覆盖reversed的自动计算,例如<li value="100">后续项仍按 99、98 递减,但语义已断裂——建议避免混用 - 嵌套
<ol reversed>时,各层级独立计数,不会跨层继承起始值
真正容易被忽略的点是:倒序编号本质是语义化排序,不是视觉装饰。如果业务逻辑里“最后一步”确实应该排在列表最上方且编号最大,那 reversed 就是对的;如果只是想换个样式顺序而语义仍是正向流程,强行倒序反而损害可访问性。



















