reversed属性仅改变编号顺序而不影响dom结构、渲染位置、焦点流和屏幕阅读器顺序；它必须配合start属性才能稳定生效，单独使用易失效；真正倒序展示应调整数据或dom而非依赖reversed。
reversed 属性只改编号，不改 DOM 顺序
加 reversed 不会让列表项“从下往上排”，它只是让编号倒着走：1→2→3 变成 3→2→1，但 <li> 在 DOM 中的顺序、渲染位置、焦点流、屏幕阅读器朗读顺序全都不变。常见错误是写 <ol reversed>
<li>A</li>
<li>B</li>
</ol> 期待看到 B 在上、A 在下——实际仍是 A 在上、B 在下，只是编号变成 2. A / 1. B。
这个行为在所有支持 reversed 的浏览器（Chrome/Firefox/Edge）里一致，Safari ≤16.4 则可能完全忽略该属性。
reversed 必须配合 start 才稳定生效
单独写 <ol reversed></ol> 时，浏览器会尝试用子元素数量推算 start 值（比如 4 个 <li> 就设 start="4"），但这套逻辑在 Safari 旧版、动态增删节点、或存在 value 属性时极易失效，结果常是编号全为 1 或直接跳回升序。
-
<ol reversed start="5"> <li>A</li> <li>B</li> <li>C</li> </ol>→ 稳定显示为 5. A / 4. B / 3. C -
<ol reversed> <li value="10">X</li> <li>Y</li> </ol>→reversed对带value的项无效，Y 仍按 11 编号 - JS 动态插入新
<li>后，必须手动重设ol.setAttribute('start', newCount)，否则编号错乱
真正倒序展示内容，得动数据或 DOM
如果目标是“最新一条排最上面”，reversed 是障眼法，不是解法。可选路径有：
- 服务端或构建时反转数组再生成 HTML —— 语义完整、可访问性好、兼容性强
- 客户端 JS 调整：
Array.from(ol.children).reverse().forEach(el => ol.append(el))—— 注意避免重复执行，且要处理事件监听器迁移 - CSS
flex-direction: column-reverse—— 视觉翻转快，但破坏焦点顺序、滚动锚点、伪元素定位，慎用于交互型列表
React/Vue 等框架中，直接用 items.slice().reverse() 渲染即可，别在模板里硬套 reversed。
编号承载语义时，reversed 很可能掩盖问题
当编号代表步骤顺序（如安装流程）、法律条文层级、错误日志优先级时，reversed 只改数字不改数据顺序，会导致视觉编号和实际逻辑脱节。例如倒计时步骤要求“3→2→1”，但用户点击第 1 步时实际操作的是原始数组最后一项——这种错位比编号错乱更危险。
此时唯一可靠做法是：确保数据源本身按所需逻辑排序（如 data.sort((a, b) => new Date(b.time) - new Date(a.time))），再用普通 <ol></ol> 渲染。编号是否倒序，应由数据决定，而非靠 HTML 属性“假装”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
