reversed属性使有序列表编号倒序显示,如从5递减到1,不影响列表项顺序;默认按项数推算起始值(4项则从4开始),可与start配合自定义起点(如start="10"则显示10、9、8);为布尔属性,现代浏览器支持但ie不支持,且仅改变视觉编号,不改变语义顺序。

有序列表(<ol></ol>)的 reversed 属性可以让编号从大到小倒序排列,比如从 5 开始递减到 1,而不是默认的 1 到 5。它只影响显示编号,不改变列表项顺序或语义。
reversed 属性的基本用法
在 <ol></ol> 标签中直接添加 reversed,浏览器会自动计算起始编号:默认按列表项数量反向推算。
- 如果列表有 4 个
<li>,默认从 4 开始倒数(4、3、2、1) - 属性是布尔型,写上即生效,无需赋值(
reversed或reversed=""效果相同) - 不能和
start属性同时控制起始值——若指定了start,reversed仍生效,但起始编号以start为准,之后递减
配合 start 属性自定义倒序起点
想从特定数字开始倒数(比如从 10 开始),可以搭配 start 使用:
<ol reversed start="10"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol>
渲染结果为:10. 第一项、9. 第二项、8. 第三项。
注意兼容性和实际效果
现代主流浏览器(Chrome、Firefox、Safari、Edge)都支持 reversed,但 IE 完全不支持。使用时需注意:
- 倒序仅作用于编号显示,
<li>的 DOM 顺序和语义顺序不变 - 对
type(如a、I)也生效:字母或罗马数字同样倒序(d、c、b、a 或 IV、III、II、I) - 若想完全控制编号样式(比如跳着编号),CSS 的
counter-reset和counter-increment更灵活
不推荐用于语义倒置
reversed 不是“把列表内容逻辑反转”,它只是视觉编号倒排。如果内容本身需要逆序呈现(比如最新消息在前),应调整 HTML 中 <li> 的书写顺序,而不是依赖 reversed。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











