用reversed属性可实现html有序列表倒序编号，配合start属性可精确控制起始值；ie需用css计数器降级，注意无障碍支持。
用 reversed 属性实现倒序编号
HTML 有序列表默认从 1 开始正向计数，要让发言名单倒着编号（比如“5. 张三”“4. 李四”…），直接加 reversed 属性最简单，浏览器原生支持，无需 JS 或 CSS 干预。
注意：它只影响编号显示顺序，不改变 DOM 节点顺序或语义结构。
-
<ol reversed></ol>必须写在<ol></ol>标签上，不能作用于单个<li> - 起始编号仍由
start属性控制；若未设start，浏览器会自动按列表项数量推算起点（如 5 项就从 5 开始） - IE 不支持
reversed，如需兼容旧版 IE，得用start手动计算并配合 CSS 计数器
<ol reversed> <li>张三</li> <li>李四</li> <li>王五</li> </ol>
手动控制起始值用 start 属性
当发言人数固定、且你明确知道总人数时，用 start 更可控。比如共 7 人发言，想让最后一位讲的人排第 1，第一位讲的人排第 7，就设 start="7"，再加 reversed 即可。
-
start接受任意整数，支持负数（如start="-2"） - 如果只写
start不写reversed，编号仍是正向的（7, 8, 9…），必须两者配合才能倒序显示 - 动态场景下（比如列表项由 JS 插入），
start值需在渲染前算好，否则可能错位
<ol reversed start="7"> <li>陈明（第 7 位发言）</li> <li>赵阳（第 6 位发言）</li> <li>刘芳（第 5 位发言）</li> </ol>
兼容 IE 的降级方案：CSS counter-reset + counter-increment
IE11 及更早版本不识别 reversed，但支持 CSS 计数器。此时需禁用原生编号（list-style: none），用伪元素 + 计数器手动实现倒序。
- 先用
counter-reset设定初始值（如counter-reset: li 7） - 每个
<li>用counter-increment: li -1递减 -
::before中用content: counter(li) ". "插入编号 - 注意：CSS 方案无法被屏幕阅读器自然识别为有序列表语义，无障碍需额外加 ARIA 属性
ol.fallback {
counter-reset: li 7;
}
ol.fallback li {
counter-increment: li -1;
list-style: none;
}
ol.fallback li::before {
content: counter(li) ". ";
}
倒序名单常见误用点
很多人以为把 <li> 元素倒着写就能倒序编号，其实不会——HTML 有序列表编号只取决于属性和计数逻辑，跟 DOM 顺序无关。真正容易出错的是这几个地方：
- 漏写
reversed，只改start，结果是正向递增（如start="5"→ 5, 6, 7…） - 在动态渲染中重复设置
start，导致不同列表段编号冲突 - 用 CSS 方案时忘记重置
counter-reset，后续其他列表编号错乱 - 把倒序理解成“内容倒放”，试图用
flex-direction: row-reverse，这只会翻转布局，编号还是正向的
倒序编号本质是呈现层调整，关键在 reversed 和 start 的配合时机与取值，而不是移动 HTML 元素位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
