reversed属性仅改变<ol>编号顺序而不影响DOM结构和可访问性，适合纯展示型倒序编号；需兼容旧浏览器时可用CSS计数器或服务端反序输出；视觉倒序用flex-direction:column-reverse会翻转DOM顺序，影响键盘导航和屏幕阅读器；真正反转DOM需JavaScript prepend操作；数据源排序才是根本解决方案。
直接用 reversed 属性就能让 <ol> 编号倒着显示，但别指望它能翻转内容顺序或修复可访问性问题——它只改数字，不改 DOM。
用 reversed 实现编号倒序（仅限 <ol>）
这是最轻量的方案，适合纯展示型倒序编号，比如“Top 5 排名”“倒计时步骤”。浏览器会自动从列表项总数开始递减编号。
-
reversed是布尔属性，写上即生效：<ol reversed><li>A</li><li>B</li><li>C</li></ol>渲染为3. A、2. B、1. C - 搭配
start可控起点：<ol reversed start="7">会让三项显示为7、6、5，不是“从 7 往下数到 1” - IE 全系（含 IE11）和 Safari ≤9 不支持该属性，检测方式是
document.createElement('ol').reversed === undefined - 若需兼容旧浏览器，可用 CSS 计数器模拟，但得手动算初值；或者服务端直接输出反序的
<li>顺序
用 flex-direction: column-reverse 视觉倒序整个列表
当你需要“最后一项显示在最上面”，且不介意 DOM 顺序也跟着翻转（包括 Tab 键顺序、屏幕阅读器朗读流），这个 CSS 方案最快。
- 必须把
<ol>或<ul>设为 flex 容器：display: flex; flex-direction: column;，再切为column-reverse - 错误做法：对每个
<li>单独设order，动态增删项时极易失控 - 副作用明显：键盘 Tab 会从底部往上跳，盲人用户听到的顺序和视觉相反；如需可访问性，得同步加
aria-reversed="true"并测试读屏行为 - 不要在
<ol>上混用reversed和column-reverse—— 编号逻辑和视觉顺序会打架，比如三项可能显示为3, 2, 1但内容却是C, B, A（正确）或A, B, C（错乱）
用 JavaScript 真正反转 DOM 顺序（内容+顺序都变）
只有当你依赖 DOM 顺序（比如第三方库按子节点索引取值）、需要服务端渲染一致性、或必须保持键盘焦点流与视觉一致时，才值得走 JS 路线。
立即学习“前端免费学习笔记（深入）”；
- 安全反转写法是循环
prepend()：while (listEl.lastElementChild) listEl.prepend(listEl.lastElementChild); - IE 不支持
prepend()，降级用insertBefore(child, listEl.firstChild) - 避免
Array.from().reverse().forEach()后 append —— 节点被移除后childNodes长度实时变化，索引会偏移 - 超大列表（>1000 项）慎用：单次操作触发多次重排，建议用
DocumentFragment缓冲，或分帧（requestAnimationFrame）处理
最容易被忽略的语义断裂点
编号倒序 ≠ 数据倒序。比如展示“最近 7 天数据”，reversed 只能让编号变成 7→1，但如果原始数组没按时间降序排列，第 1 个 <li> 显示的仍是最早那天的数据 —— 用户看到“1. 9月15日”，实际想看的是“1. 9月21日”。
真正要解决的，永远是数据源排序（array.sort((a, b) => new Date(b.date) - new Date(a.date))），而不是靠 HTML 属性“假装倒序”。reversed 和 flex-direction 都只是表现层补丁，它们不修复逻辑错位。
