reversed仅改变编号顺序而不反转dom顺序；flex-direction:column-reverse可同步视觉、语义与tab顺序；真正反转dom需用prepend或insertbefore；分支流程应拆分独立ol而非混入同一列表。
ol reversed属性只改编号顺序，不反转DOM顺序
很多人加了 reversed 就以为列表项真的“倒过来了”，结果发现点击事件绑定没变、JS遍历还是从上到下、屏幕阅读器读的还是原顺序——因为 reversed 仅影响浏览器渲染的编号（1→3, 2→2, 3→1），li 在 DOM 中的位置完全没动。
适用场景：纯展示型步骤说明，比如“倒计时操作指南”或“回溯式流程图”，不需要交互逻辑依赖顺序。
-
<ol reversed start="5"></ol>→ 编号显示为 5、4、3，但第一个li还是 DOM 中的第一个节点 - 若配合 CSS
flex-direction: column-reverse，视觉和可访问性顺序会同步反转，但键盘 Tab 流也会倒过来，需额外测试 - 别在需要
querySelectorAll('li')[0]取“第一步”的逻辑里混用reversed，它不改变索引
用flex-direction: column-reverse做视觉+语义倒序
这是真正让列表“看起来倒、读起来也倒、tab过去也倒”的做法，但代价是 DOM 顺序和可访问性顺序被强制同步反转。
关键点：必须把 ol 设为 flex 容器，且子元素 li 不能设 display: block 以外的值（否则可能破坏 flex 布局）。
- 基础写法：
<ol style="display: flex; flex-direction: column-reverse;"></ol> - 要保留默认间距，加
flex-direction: column-reverse; gap: 0.5em;比靠 margin 更可靠 - 移动端缩放时，原生
ol序号比 CSS 伪元素更稳；所以推荐保留ol结构，只用 flex 控制排列 - 如果某步要动态插入新项，用
prepend()而不是append()，否则新项会出现在最底下（视觉上变成“第一项”）
JavaScript反转DOM顺序才真正改变节点位置
当后端返回的数据是正序，但前端必须按倒序渲染（比如评论最新在前），且第三方库依赖 DOM 顺序时，就得动真格——操作节点本身。
安全做法不是用 Array.from().reverse() 然后循环 appendChild()，而是逐个把最后一个 li 提出来插到开头。
- 兼容 IE 的写法：
ol.insertBefore(li, ol.firstChild) - 现代写法（推荐）：
ol.prepend(ol.lastElementChild)，循环直到ol.children.length - 大量项（>500）时卡顿？用
DocumentFragment收集所有li再一次性插入，避免重复重排 - 注意：事件监听器会随节点移动，不用重新绑定；但 React/Vue 等框架里直接操作 DOM 可能触发警告或失效
别把条件分支塞进同一个ol里
看到“如果登录成功，执行 A；否则执行 B”，就想着在 ol 里写两套步骤——这是语义污染。有序列表表达的是确定、线性的流程，不是 if-else 树。
真实项目里，这种分支一多，ol 就变成维护噩梦：编号错乱、CSS 选择器失效、自动化测试无法断言“第3步是X还是Y”。
- 主干流程用一个
<ol></ol>，分支用独立<ol></ol>或<details></details>包裹，并加文字标注触发条件 - 需要 JS 控制显隐？给分支容器加
aria-hidden="true"，而不是删掉 DOM —— 屏幕阅读器仍能感知结构 - 编号续接用
start属性，比如主流程到第4步，分支从<ol start="5"></ol>开始，语义清晰
value 属性——但要注意，value 只影响当前 li，后续项仍按默认规则递增。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
