reversed 属性仅对 <ol> 有效,使编号倒序显示(如5、4、3),自动基于 <li> 数量计算起点;对 <ul> 无效,需用 CSS 或 JS 实现视觉倒序;不影响 DOM 顺序和 JS 获取元素的顺序。

reversed 属性只对 <ol> 有效,<ul> 加了也没用
HTML 的 reversed 是布尔属性,专用于有序列表 <ol>,让编号从大到小倒排。它对无序列表 <ul> 完全无效——浏览器会忽略,既不报错也不渲染任何变化。
常见错误是给 <ul> 加 reversed 还以为能倒序显示项目符号(比如 ● → ○ → ◆),实际毫无效果。真要倒序显示 <ul> 内容,得靠 CSS 或 JS 手动翻转 DOM 顺序。
reversed 默认从最大值开始编号,不是固定从 10 或 9 开始
加了 reversed 后,浏览器会自动计算列表项数量,然后从该数量开始倒数。比如 5 个 <li>,编号就是 5、4、3、2、1;换成 3 个,就变成 3、2、1。它不依赖 start 属性,除非你显式设置。
如果同时用了 start="10" 和 reversed,编号会从 10 开始倒:10、9、8……但注意,这个“10”是起点,不是总项数。实际显示多少项,仍取决于 <li> 数量。
立即学习“前端免费学习笔记(深入)”;
<ol reversed start="8"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol>
上面会显示为:
8. 第一项
7. 第二项
6. 第三项
Chrome/Firefox/Edge 都支持,但 Safari 在旧版本里有兼容问题
现代主流浏览器基本都支持 reversed,但 Safari 12 及更早版本存在 bug:如果 <ol reversed> 里嵌套了其他块级元素(比如 <div> 包裹 <li>),编号可能错乱或丢失。Safari 13+ 已修复。
稳妥做法是避免在 <ol> 里放非 <li> 块级容器;若必须结构复杂,优先用 CSS flex-direction: column-reverse + 手动重置计数器(counter-reset),控制力更强。
-
reversed是 HTML 层语义控制,不改变 DOM 顺序 - 想真正反转 DOM 节点顺序(比如让最后一个
<li>在 DOM 中排第一),得用 JS 的reverse()或appendChild()移动 - 用 CSS
order或flex-direction只影响视觉,对屏幕阅读器和 SEO 可能不友好
别指望 reversed 改变列表内容逻辑顺序
reversed 只改编号,不改数据源顺序,也不影响 JS 获取 document.querySelectorAll('li') 的结果顺序。如果你靠 li[0] 拿“第一个”项,它永远是 HTML 中写的第一个 <li>,哪怕编号显示为 5。
真正需要倒序处理数据(比如后端返回的数组要反向渲染),应该在 JS 层先调用 array.reverse() 或用 [...array].reverse(),再生成列表——而不是依赖 reversed 属性去“假装”倒序。
容易被忽略的是:当列表动态增删项时,reversed 不会自动重算编号起点;浏览器只在初始渲染时计算一次项数。所以频繁更新的列表,建议统一用 JS 控制编号逻辑,更可控。



















