reversed 属性仅改变有序列表的编号显示顺序，不改变 DOM 结构和语义顺序，无法用于动态倒计时；正确做法是用 JS 完全控制编号文本并确保数据与呈现一致。
reversed 属性不能用于实现倒计时列表的动态渲染，它只影响编号显示，不改变 DOM 顺序，也不响应时间变化。
reversed 属性到底改了什么
它只让浏览器把 <ol> 的自动编号逻辑从递增（1, 2, 3）变成递减（3, 2, 1），但所有 <li> 元素在 DOM 中仍按原始顺序排列。键盘 Tab 焦点、屏幕阅读器朗读、JS 遍历 ol.children，全都是从第一个 <li> 开始——和视觉上看到的“3. 第三项”完全错位。
常见错误现象：
- 写
<ol reversed><li>A</li><li>B</li></ol>，Chrome 显示 “2. A / 1. B”，Safari ≤16.4 直接忽略，只显示 “1. A / 1. B” - 给某个
<li>加了value="5"，reversed 对它及后续项全部失效 - 用 JS 动态插入新
<li>，编号变成 “2. A / 1. B / 3. C”，因为浏览器没重算 start
为什么 start + reversed 组合也靠不住
想稳定输出 “4. 3. 2. 1”，必须显式写 <ol start="4" reversed>，但这个组合有硬伤：
-
start值必须等于当前<li>总数，JS 每次增删都要手动更新ol.start，否则编号崩坏 - Firefox 在
start="3" reversed下输出 “3. 2. 1”，不是 “4. 3. 2. 1”（它按 start 值倒排，不推总项数） - 一旦列表内容来自 API 或用户输入，项数不确定，
start就没法静态写死 -
reversed是布尔属性，无法绑定到变量，更不能用 CSS 或 JS 动态 toggle 编号方向
真倒计时列表该怎么做
把 <ol> 当纯容器，编号由 JS 完全控制，不依赖浏览器自动编号逻辑：
- 用
textContent或innerText显式写入每个<li>的文本，比如li.textContent = `${count}. ${text}` - 倒计时逻辑放
setInterval或requestAnimationFrame里，每次更新全部<li>的文本内容 - 如果要保留语义化，可用
aria-label补充说明当前是第几步，例如aria-label="剩余 3 步" - 避免混用
reversed和手动设置文本——可访问性检测工具会报错，屏幕阅读器可能重复播报编号
示例片段：
const ol = document.querySelector('ol');
const items = ['准备', '执行', '收尾'];
let count = items.length;
<p>function renderCountdown() {
ol.innerHTML = items.map((text, i) =>
<li>${count - i}. ${text}</li>
).join('');
}</p><p>renderCountdown();
setInterval(() => { count--; renderCountdown(); }, 1000);
最容易被忽略的语义陷阱
当编号承载操作步骤、法律条文或错误日志优先级等含义时，reversed 只改数字不改数据顺序，会造成严重语义断裂。比如“第 1 步：断电”在 DOM 里仍是第一个 <li>，但编号被强行标成 “3.”，屏幕阅读器读出来就是“第三步：断电”，而实际流程中它确实是第一步。这种错位不是样式问题，是信息架构缺陷，必须从数据源层面解决——后端返回已倒序数组，或前端用 items.slice().reverse() 再生成列表。
