reversed 属性不响应动态增删，需手动重设 start；safari 兼容性差，应显式设置 start 并降级；真正倒序需重排 dom 或服务端排序；非数字 type 倒序不可靠，建议用 css counter。
reversed 属性不响应数据增删，必须手动重设 start
只要列表内容动态变化（比如加载更多、删除某项、实时追加），reversed 就不会自动更新编号。浏览器只在初始渲染时读取 start 值，之后新增的 <li> 仍按原逻辑递增或递减，导致序号错乱，例如出现 5. 4. 3. 2. 1. 6. 这种断裂编号。
实操建议：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 每次增删后，立即用 JS 重新计算总项数，并调用
ol.setAttribute('start', itemCount) - 避免在 DOM 中混用
value属性——它会中断reversed的连续递减逻辑，让后续编号从value值开始 +1，而非延续倒序 - 如果使用框架（如 React），不要依赖
reversed配合 key 重排；应先反转数据数组，再渲染，让start始终等于原始数组长度
Chrome 和 Safari 对 start + reversed 的处理差异大
Safari（尤其 ≤16.4）常忽略 reversed 或错误推算 start，即使你写了 <ol reversed start="5"></ol>，也可能渲染成 1. 1. 1. 或直接回退到 1. 2. 3.。Chrome 虽稳定，但若页面初始无 start，它会用子节点数量当起点，而 Safari 可能返回 0 或 NaN 导致失效。
实操建议：
- 始终显式写
start，绝不依赖浏览器隐式推算（如<ol reversed></ol>单独存在基本无效） - 在初始化时检测兼容性：
const supportsReversed = 'reversed' in document.createElement('ol');，不支持就降级为 CSS counter 或 JS 手动注入编号 - 对 Safari 用户，可加一层兜底样式：
ol:not([reversed]) li::before { content: counter(item); }+counter-reset: item 5;，但需同步维护初值
真正倒序加载 ≠ 视觉倒序编号
如果你的需求是“最新一条排最上面”，仅靠 reversed 是障眼法：DOM 顺序仍是旧→新，屏幕阅读器按原始顺序朗读，键盘 Tab 焦点流也不变，语义和视觉完全脱节。编号变成 5→1，但内容还是从上到下依次排列，用户看到的是“5. 新增项 / 4. 上一条 / …”，逻辑混乱。
实操建议：
- 服务端或 API 返回时就按时间倒序排列好数据，前端直接渲染，
start设为数组 length 即可 - 客户端加载时，用
Array.from(ol.children).reverse().forEach(child => ol.prepend(child))真正重排 DOM（注意避免重复执行） - 禁用
flex-direction: column-reverse做视觉翻转——它破坏锚点滚动、伪元素定位，且无法解决焦点顺序问题
reversed + type="a" 或 type="I" 会引发字母/罗马数字歧义
reversed 对字母和罗马数字的倒序没有标准定义。比如 <ol type="a" reversed start="3"></ol>，理论上应显示 c, b, a，但部分浏览器可能按 ASCII 序列倒排（z, y, x），或把 start="3" 解释为第 3 个字母（c），而忽略类型边界（a–z）。更糟的是 type="I"，start="2" 加 reversed 可能输出 II, I, 0 或直接崩溃。
实操建议：
- 凡涉及非数字编号的倒序，一律放弃
reversed，改用 CSScounter手动控制：counter-reset: item 3;+li::before { counter-increment: item -1; content: counter(item) ". "; } - 若必须用 HTML 原生属性，只在
type="1"场景下用reversed，并确保所有环境都测试过start值与项数严格一致 - 避免在法律条文、操作步骤等强语义场景中用
reversed模拟倒序——编号必须与数据逻辑顺序对齐，不能“假装”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
