reversed属性仅控制编号递减方向而不改变列表项顺序，需配合start属性才能精确控制起始编号，适用于倒序编号场景但不适用于内容倒序排列。

reversed 属性只控制起始编号，不改变元素顺序

加了 reversed 的 <ol></ol> 不会把列表项倒过来排，只是让编号从大往小走。比如你写三个 <li>，它们在 DOM 和渲染顺序里还是从上到下，但编号变成 3.、2.、1. —— 这点很多人一开始会误解。

常见错误现象：
– 以为加了 reversed 就能“反转内容”，结果列表项没动，编号乱了
– 在需要真正倒序展示数据的场景（如最新日志置顶）误用它，导致语义和视觉错位

• reversed 是布尔属性，写上即生效，无需赋值（reversed="true" 或 reversed="reversed" 都多余）
• 起始编号由 start 属性决定；reversed 只影响编号递减方向
• 若未设 start，浏览器按 <li> 数量自动推算起始值（例如 3 个项默认 start="3"）

和 start 属性配合才能精确控制编号

单独用 reversed 很难预测起始数，尤其当 <li> 动态增删时。必须搭配 start 才能稳定输出想要的序列。

使用场景：
– 文档中某节需从 10 开始倒数编号（如“第 10 步 → 第 1 步”）
– 生成带固定范围编号的教程步骤，且希望高序号在前

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<ol reversed start="5">
<li>最后一步</li>
  <li>中间步骤</li>
  <li>初始操作</li>
</ol>

渲染效果是：5.、4.、3.。注意：不是 5.、4.、3.、2.、1. —— start 设的是起点，不是总数。

兼容性没问题，但语义要谨慎

reversed 在所有现代浏览器（Chrome/Firefox/Safari/Edge）都支持，IE10+ 也行。真正的问题在语义层面：

• 屏幕阅读器会按 DOM 顺序读出列表项，但可能播报 “第 5 项”、“第 4 项”… 容易让用户困惑“为什么顺序和编号对不上”
• 如果业务逻辑真需要倒序排列内容（比如时间倒序日志），应该用 JS 或后端把数组 reverse 再渲染，而不是靠 reversed
• CSS 的 flex-direction: column-reverse 或 grid-auto-flow: row-reverse 能视觉翻转，但会破坏列表语义和可访问性，不推荐混用

别用 reversed 实现“倒放动画”或“滚动到底部”

有人想用 reversed 配合 JS 滚动到末尾，或者做倒计时动画，这属于误用。它只影响编号生成逻辑，不影响 DOM 结构、事件流或 CSS 渲染流。

容易踩的坑：
– 给 <ol reversed></ol> 加 scrollTop = scrollHeight，发现滚不到“最后一项”，因为最后一项在 DOM 里仍是第三个 <li>
– 用 querySelector('li:last-child') 拿到的是物理末尾项，不是编号为 1. 的那个

• 要定位编号为 1. 的项？得结合 start 和项数计算索引，或用 :nth-child() 配合样式类
• 动态插入新 <li> 后，编号不会自动重排 —— reversed 是静态属性，不响应变化
• 服务端渲染时若列表长度不确定，start 值必须提前算好，否则前端补 reversed 会导致编号断层

实际用的时候，先问自己：要的是“编号倒着写”，还是“内容倒着排”。前者用 reversed + start；后者得动数据或结构，别绕弯。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！