reversed属性不能真正倒序内容，仅使编号递减且必须配合start才能稳定生效；单独使用常无效，尤其在safari或存在value属性、动态插入、非数字类型时；正确用法是显式设置start为项数，但语义倒序应通过反转数据源实现。

reversed 属性本身不能实现“内容倒序排列”，它只让编号从大到小递减，且必须配合 start 才能稳定生效。单独加 reversed 很可能没反应，尤其在 Safari 或动态场景下。

为什么reversed经常不生效

浏览器对 reversed 的处理依赖隐式 start 推算（比如 4 个 li 就默认设 start="4"），但这个逻辑极易被破坏：

• 存在 value 属性的 li 时，reversed 完全失效 —— <li value="10">B</li> 后面的项会变成 11、12，而非递减
• Safari ≤16.4 版本忽略 reversed，即使写了 start 也常显示为 1. 1. 1.
• JS 动态插入新 li 后，编号变成 4. 3. 2. 1. 5. —— 因为 start 没重设，浏览器仍按旧值递减
• type="a" 或 type="I" 下，字母/罗马数字倒序语义混乱（c 不是第 3 个字母，iii 倒过来不是 i）

reversed + start 的正确写法

想稳定输出 4. 3. 2. 1.，必须显式指定 start，且值等于列表总项数：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<ol reversed start="4">
<li>Fix bug</li>
  <li>Write test</li>
  <li>Review PR</li>
  <li>Merge</li>
</ol>

关键点：

• start 必须是整数，不能是字符串或小数
• 项数变化时（增删），必须手动调用 ol.setAttribute('start', newCount)
• 不要混用 value 和 reversed —— 二者互斥
• CSS counter-reset 会覆盖 reversed 行为，冲突时以 CSS 计数器为准

真正要倒序内容？别碰reversed

如果目标是“最新一条排最上面”或“最后一项视觉置顶”，reversed 是障眼法：

• DOM 顺序不变 → 屏幕阅读器仍按原始顺序朗读，编号和语义脱节
• 键盘 Tab 焦点流仍是第一项→第二项→第三项，与视觉相反
• flex-direction: column-reverse 虽能翻转视觉，但破坏滚动锚点、伪元素定位、子元素 position: absolute 的参照系
• 唯一健壮解法：反转数据源本身 —— 后端返回已排序数组，或前端用 items.slice().reverse() 生成列表

最容易被忽略的是：当编号承载法律条文、操作步骤或错误日志优先级等语义时，reversed 只改数字不改逻辑，反而制造歧义。此时编号必须与数据顺序严格对齐。

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