reversed属性是html5原生倒序编号最直接方法，需配合start属性确保稳定显示（如4. 3. 2. 1），仅用reversed依赖浏览器隐式推算易出错；它只改变编号方向而不调整dom顺序，屏幕阅读器仍按原始顺序朗读，且ie完全不支持。
使用 reversed 属性是最直接的方法
HTML5 原生支持倒序编号，只需在 <ol></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></ol>时，各层级独立计数，不会跨层继承起始值
真正容易被忽略的点是：倒序编号本质是语义化排序，不是视觉装饰。如果业务逻辑里“最后一步”确实应该排在列表最上方且编号最大，那 reversed 就是对的；如果只是想换个样式顺序而语义仍是正向流程，强行倒序反而损害可访问性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
