reversed属性仅倒序起始编号并正向递增，不改变列表项顺序；需配合start属性才能实现真正倒序编号（如4,3,2,1），且不影响DOM和焦点流。

reversed 属性只控制起始编号方向，不改变列表项顺序

reversed 是 ol 的布尔属性，它让浏览器从大数开始倒着编号（比如 5, 4, 3…），但 li 元素本身的 DOM 顺序和渲染顺序完全不变。它不是“反转列表”，只是“倒着标号”。常见误解是以为加了 reversed 就能自动把最后一条内容显示在最上面——不会。

基础用法：默认从最大序号开始，步长固定为 1

浏览器会根据 li 个数自动推算起始值。例如有 4 个 li，就会从 4 开始标号：

<ol reversed>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
</ol>

渲染效果是：
4. 第一项
5. 第二项
6. 第三项
7. 第四项

注意：这里实际起始是 4，但后续按 +1 递增，不是递减——这是很多人被坑的地方。标准行为是「倒序起始 + 正向递增」。

立即学习“前端免费学习笔记（深入）”；

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

想真正倒着编号（如 4, 3, 2, 1）？必须配合 start 属性手动控制

仅靠 reversed 无法实现递减显示。你需要显式设置 start 为列表总长度，并确保没有其他干扰（如 value 属性覆盖）：

• 先统计 li 个数（服务端渲染时可算好，前端可用 document.querySelectorAll('ol.reversed li').length）
• 把 start 设为该数值，reversed 仅作语义提示（部分屏幕阅读器会据此调整播报逻辑）
• 如果某 li 有 value 属性，它会中断自动编号，需统一清理或重写逻辑

正确示例（4 项，要显示 4→1）：

<ol reversed start="4">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
</ol>

兼容性与可访问性注意事项

reversed 在 Chrome 8+、Firefox 8+、Safari 11+、Edge 79+ 均支持，IE 完全不支持。更重要的是：

• 视觉上编号倒序 ≠ 内容逻辑倒序，对键盘导航、屏幕阅读器而言，焦点流仍是原始 DOM 顺序
• 若业务真需要内容倒置（比如最新消息在最前），应该用 CSS flex-direction: column-reverse 或 JS 重排 DOM，而不是依赖 reversed
• reversed 和 start 同时存在时，start 优先级更高；但若 start 值小于 li 数量，编号仍可能溢出（如 start="2" + 5 个 li → 2, 3, 4, 5, 6）

真正要倒序展示内容时，别只盯着编号——先想清楚是改呈现，还是改数据顺序。