ol 标签的 reversed 属性原生支持倒序编号,浏览器自动从最大值递减;可与 start、type 组合使用,但需注意兼容性及属性透传。

ol 标签的 reversed 属性直接生效
HTML5 原生支持倒序编号,不需要 CSS 或 JS。给 <ol> 加上 reversed 属性即可,浏览器自动从最大值开始递减(如 5, 4, 3…),起始值默认按子项数量推算。
常见错误是手动写 start="5" 却忘了加 reversed,结果还是正向排列。
-
<ol reversed><li>第一项</li><li>第二项</li></ol>→ 显示为 “2. 第一项” “1. 第二项” - 想从 10 开始倒数?加
start="10":<ol reversed start="10">→ 10, 9, 8… -
reversed是布尔属性,写成reversed="reversed"或reversed=""都行,但推荐无值写法更简洁
用 type 和 start 组合控制数字样式与起点
type 决定编号格式(1、A、a、I、i),start 指定起始数值,二者和 reversed 可共存,但注意兼容性边界:
-
<ol type="A" reversed start="4">→ D, C, B…(不是从 Z 开始,而是按字母表位置倒推) -
type="I"(大写罗马数字)在部分旧版 Safari 中不触发倒序,建议只在现代环境使用 -
start必须是整数,start="0"+reversed会显示 0, -1, -2…(合法但少见)
CSS counter-reset 方案仅作备用
当需要更灵活控制(比如跳过某些项、混合嵌套倒序),才考虑 CSS 计数器。但纯倒序编号没必要绕路:
立即学习“前端免费学习笔记(深入)”;
- 必须显式设置
counter-reset初始值,再用counter-increment递减,代码量多且易错 -
li::before { content: counter(mylist) ". "; counter-increment: mylist -1; }—— 注意是-1 - IE 不支持
reversed,但 IE 也不推荐继续维护;若真要兼容,CSS 方案反而更不可靠(计数器在 IE 中行为不一致)
JavaScript 动态修改时别漏掉 reversed 属性
用 JS 添加或重排 <li> 后,如果依赖自动编号逻辑,记得同步更新 <ol> 的 reversed 状态:
- 直接操作 DOM 后,浏览器不会自动重算编号顺序,
reversed属性仍有效,但start值可能需手动调整 - 避免用
innerHTML替换整个<ol>却丢掉原有属性;推荐用setAttribute("reversed", "")显式保留 - 动态增删项后,若发现编号错乱,优先检查
reversed是否还在标签上,而不是怀疑 JS 逻辑
start 和 type 的组合影响预期,尤其在嵌套列表或服务端渲染时,属性是否透传到位才是实际卡点。



















