仅倒排编号而非内容，dom顺序、可访问性及样式选择器均保持原序，ie和旧safari不支持，需用css计数器、js翻转或服务端反序等方案替代。
ol 标签加 reversed 属性是最直接的方式，但它的行为不是“倒排内容”，而是“倒排编号”——这点不搞清，后续所有样式、可访问性、兼容性问题都会冒出来。
reversed 属性只改编号，不改 DOM 顺序
给 <ol reversed></ol> 写三行内容，浏览器会显示 3、2、1，但 DOM 中第一个 <li> 还是原始第一个节点。这意味着：
- 屏幕阅读器仍按原始顺序朗读，编号只是视觉层叠加
- 键盘 Tab 流、CSS
:focus-within、nth-child()选择器都基于 DOM 位置，不受影响 - 如果你希望“最新一条排最上面”，
reversed解决不了——它不移动节点，只改数字
IE 和旧 Safari 完全不支持 reversed
document.createElement('ol').reversed 在 IE 全系（含 IE11）和 Safari ≤9 中返回 undefined，属性被忽略。实际项目中若需兼容，得备选方案：
- CSS 计数器：用
counter-reset+counter-increment: -1模拟，但需预知项数或 JS 动态设初值 - JS 补丁：检测不支持时，手动调用
Array.from(list.children).reverse().forEach(el => list.prepend(el)) - 服务端直接输出反序的 HTML，绕过客户端判断
start 与 reversed 组合容易误判起始值
<ol reversed start="10"></ol> 会显示 10、9、8；但若漏写 start，浏览器默认用项总数当起点（3 项 → 显示 3、2、1）。这个“自动取 length”的行为常被当成“智能倒数”，其实它根本不感知数据含义——比如你动态增删 <li>，编号不会自动重算。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
真正需要“时间倒序 + 编号绑定”（如“最近 7 天日志，今天是第 1 条”），必须两件事同步做：
- 数据源本身按时间降序排列（JS 里
arr.sort((a, b) => new Date(b.date) - new Date(a.date))） - 再套
<ol reversed></ol>或其他编号方案，否则编号和内容语义脱节
想让内容真倒序？别只靠 reversed
如果目标是视觉+DOM+可访问性三者都倒过来（比如聊天记录最新消息置顶），reversed 不够用。可行路径有：
- CSS
flex-direction: column-reverse：简单快捷，但会同步反转 Tab 顺序和屏幕阅读器流，需额外加aria-reversed="true" - JS
prepend()翻转节点：安全做法是while (list.lastElementChild) list.prepend(list.lastElementChild)，避免索引错乱 - 大量项（>500）时注意性能：用
DocumentFragment缓冲操作，或分帧处理
最容易被忽略的是：编号倒序 ≠ 数据倒序 ≠ 渲染倒序——三个“倒序”各自独立，混用前务必确认你要动的是哪一层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
