reversed属性仅反转编号顺序而不改变DOM结构，屏幕阅读器仍按原始顺序朗读，兼容性差且无法响应动态变化，需结合CSS计数器或服务端反转数据保障语义正确。
reversed 属性只控制编号方向，不改变 DOM 顺序
它让 <ol></ol> 的编号从大到小走（比如 5、4、3），但 <li> 在 DOM 中的顺序、渲染流、焦点顺序、屏幕阅读器朗读顺序，全部保持原样。这意味着：视觉上像倒序，语义上仍是正序。
- 屏幕阅读器仍按原始 DOM 顺序读“第一项、第二项……”，不会因为编号是 5. 4. 3. 就倒着读
- 用 JavaScript 操作
ol.children[0]拿到的永远是第一个<li>，不是编号为 5 的那个 - 想真正把内容倒过来排（比如把最后一项显示在最上面），必须用
flex-direction: column-reverse或手动调换节点顺序
浏览器支持不统一，旧版 Safari 和 IE 完全不认
reversed 是 HTML5 新增属性，Chrome/Edge（v80+）和现代 Safari（17+）支持稳定；Firefox 支持但逻辑依赖 start；Safari ≤16.4 和所有 IE 版本直接忽略该属性，渲染成普通升序列表。
- 检测是否生效不能只看
ol.reversed属性值——它可能返回true但渲染无效；更可靠的方式是取第一个<li>的getComputedStyle或检查其::marker内容 - 若需兼容 Safari 16.4 及更早版本，得用 CSS 计数器兜底：
counter-reset: item 5; li::before { counter-increment: item -1; content: counter(item) ". "; } - 服务端渲染时直接反转数据再生成
<ol></ol>，是最稳妥的兼容方案
reversed 和 start 组合容易误判起始值
没写 start 时，浏览器默认用列表项总数作为起点（3 个 <li> 就从 3 开始 → 3. 2. 1.）；但一旦显式设了 start="10"，就会严格从 10 往下递减（10. 9. 8.），和项数无关。
- 动态删减
<li>后，reversed不会自动重算start，必须手动调用ol.setAttribute('start', newCount) - 配合
type="a"使用时，倒序是字母表逆序（z, y, x），不是“第 3 项→c、第 2 项→b”，易造成语义错乱 - 如果列表项由 JS 动态插入，别依赖浏览器自动推算
start，显式设置更可控
真倒计时或步骤倒序，必须用 JS 更新 textContent
reversed 是静态布尔属性，无法响应时间变化。要做每秒递减的“剩余步骤”或“考试倒计时”，靠它完全不行。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：把
<ol></ol>当容器，用 JS 控制每个<li>的textContent，例如li.textContent = `第 ${remaining - i} 步` - 避免混用：不要一边设
reversed，一边又手动写死textContent，会导致编号与文字冲突、可访问性受损 - 若需视觉倒序 + 语义正确，优先考虑服务端或构建时反转数据源，再生成静态
<ol></ol>，而非客户端补丁
实际中最容易被忽略的是：编号倒序 ≠ 数据倒序。只要编号承载语义（比如“步骤 1 必须先做”），就必须确保数据排列、DOM 顺序、编号逻辑三者一致——reversed 只解决其中一环。
