reversed 属性必须配合 start 才能实现倒序编号，单独使用无效；它仅改变编号显示，不改变 DOM 顺序和语义；动态场景下不可靠，推荐用 CSS counters 或手动反转 DOM 作为降级方案。
reversed 属性必须配 start 才能显示倒序编号
单独写 <ol reversed> 几乎没用——浏览器不会自动推算起始值，Chrome 可能显示 1. 1. 1.，Safari 直接忽略，Firefox 表现也不一致。真正让编号变成「5. 4. 3. 2. 1.」，start 是硬性前提。
常见错误是以为 reversed 能“智能倒数”，结果只加这个属性，发现编号没变或全为 1。原因很简单：浏览器对 reversed 的处理依赖显式 start 值，否则回退到默认行为（多数情况是 start="1"，reversed 后变成 1、0、-1……被截断或忽略）。
-
<ol reversed start="5"><li>A</li><li>B</li><li>C</li></ol>→ 显示为 5. A / 4. B / 3. C -
<ol reversed><li>A</li><li>B</li></ol>→ 多数浏览器显示 1. A / 1. B 或直接当普通<ol>渲染 - 项数变化时，
start不会自动更新：新增<li>后，编号可能变成 5. 4. 3. 2. 6.（因旧start未重设）
reversed 不改变 DOM 顺序，只改编号逻辑
这是最容易被误用的点：reversed 只影响数字显示，<li> 在 DOM 中仍是原始顺序。屏幕阅读器按 DOM 顺序朗读，键盘 Tab 焦点也从第一个 <li> 开始，视觉上看到的「5. A / 4. B」实际语义仍是「A 是第一项，B 是第二项」。
如果你要的是「最新一条排最上面」这种真实倒序排列，reversed 完全无效。它解决不了内容位置问题，只解决编号方向。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 想让内容视觉倒序 + 语义一致 → 必须反转数据源或 DOM 节点，例如用
Array.from(ol.children).reverse().forEach(el => ol.append(el)) - 用
flex-direction: column-reverse虽能翻转视觉，但会破坏焦点流、滚动锚点和伪元素行为 -
value属性会彻底禁用reversed：只要某个<li value="10">存在，后续编号全按手动值递增，reversed对它和之后的项完全失效
浏览器兼容性和动态场景下的坑
IE 全系不支持 reversed；Safari ≤16.4（即 iOS 16.4 之前）基本忽略该属性；即使现代 Safari 17+ 支持了，start + reversed 组合在动态插入/删除 <li> 后仍容易错乱。
服务端渲染或构建时已知项数，reversed 可用；但客户端 JS 动态生成列表、或用户可增删项时，它就不可靠了。
- 检测支持性：
document.createElement('ol').hasAttribute('reversed')返回false就得降级 - 降级方案优先选 CSS counters：
counter-reset: item 5; counter-increment: item -1;，配合::before控制显示，兼容性更好 - 若用 JS 实现真倒计时（如每秒减 1），别依赖
reversed，直接操作textContent或 innerHTML 更可控
reversed 的真实适用场景其实很窄
它只适合静态、项数固定、且编号需与数据逻辑反向绑定的场合。比如法律条文附则、错误日志按时间倒序但编号要从高到低（“第 3 条”对应最新一条），这时 start 可预设，reversed 才有意义。
一旦编号承载操作步骤、优先级或可访问性语义，光靠 reversed 就是在制造歧义——数字在倒，数据没倒，屏幕阅读器和键盘用户看到的完全是另一套逻辑。
最容易被忽略的一点：当你用 reversed 时，其实已经把「编号」和「顺序」解耦了。如果这两者不该解耦，那就别用它。
