可原生实现倒序编号，但仅改数字不改dom顺序，需配合start属性确保稳定，旧版safari和ie不支持，且无法解决语义倒序需求。
直接用 reversed 属性就能倒序编号
不用 JS、不用 CSS，<ol reversed></ol> 是 HTML 原生支持的最简方案。浏览器会自动计算 start 值，比如 5 个 <li> 会显示为 5. 4. 3. 2. 1.。
常见错误现象：
-
<ol reversed> <li>A</li> <li>B</li> </ol>显示为2. 1.，但误以为是“从 2 开始倒排”，其实它只是按子元素数量推导出起始值 - 删掉中间一项后编号断层（如原 5 项变 4 项，仍显示
5. 4. 3. 1.），因为reversed不会重算
使用场景有限制：
- 仅对
<ol></ol>有效，<ul></ul>加了也无反应 - 只改变编号数字，DOM 顺序、渲染流、Tab 键顺序、屏幕阅读器朗读顺序全都不变
- 旧版 Safari（iOS 12.2 之前）和 IE 完全不支持，需检查目标环境
reversed 和 start 要配合着设
单独用 reversed 很容易失控，尤其在动态增删或需要精确编号时。必须手动控制 start 才能稳住序列。
例如想固定显示 3. 2. 1.，不能只写 <ol reversed></ol>，得显式加 start="3"：
<ol reversed start="3"> <li>第三项</li> <li>第二项</li> <li>第一项</li> </ol>
要点：
-
start值必须是整数，小数或负数会被忽略（浏览器转成0或截断） - 加了
start后，reversed会从该值开始递减，而不是从子元素数量推导 - 如果列表项数量变化，JS 必须同步更新
ol.setAttribute('start', newCount)，否则编号错位 -
type="a"或type="I"下用reversed语义易混淆（比如a b c倒过来是c b a，但c并非第 3 个字母），慎用
真正要反转 DOM 顺序？别只靠 reversed
如果需求是“把最后一项当第一项展示”，且影响焦点、可访问性或依赖 DOM 顺序的脚本，reversed 完全不够——它只是改编号，不碰节点。
可行替代方案：
- CSS
flex-direction: column-reverse：给<ol></ol>加display: flex和该样式，视觉+DOM+可访问性全反转，但会破坏嵌套列表缩进和原有 margin/padding 流程 - JS 真反转：
while (ol.lastElementChild) ol.prepend(ol.lastElementChild)，安全、语义完整，但大量项（>1000）可能卡顿，建议用DocumentFragment缓冲 - 服务端/构建时反转数据再生成
<ol></ol>：最稳妥，避免运行时操作，SEO 和 SSR 友好
注意：reversed + value 属性混用会冲突——<li value="5"> 强制该项为 5，后续项仍按默认逻辑递增/递减，极易导致编号跳跃，尽量避免
编号是否承载语义？这点最容易被忽略
如果列表代表步骤、优先级、时间线等有强顺序含义的内容，光靠 reversed 就是在掩盖“数据顺序 ≠ 呈现顺序”的问题。屏幕阅读器仍按原始 DOM 读，用户听到的是“第一步、第二步”，看到的却是“2. 1.”，认知割裂。
这时候该问自己：
- 用户是否需要按编号顺序执行操作？如果是，编号必须和 DOM 顺序一致
- 是否允许 JS 动态调整？若不允许（如静态博客、邮件模板），就别用
reversed，直接反转数据源再生成 HTML - 要不要支持键盘导航？
flex-direction: column-reverse会翻转 Tab 顺序，而reversed不会——选哪个取决于交互需求
最后提醒：reversed 不触发 CSS counter-reset 或 counter-increment 的倒计数，自定义计数器必须手写递减逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
