reversed属性仅倒序编号而不改变DOM顺序,浏览器自动设start值实现5.4.3.2.1等效果,但不调整实际元素排列,屏幕阅读器仍按原始顺序朗读,旧版Safari和IE支持有限。
属性只控制编号方向,不改变 DOM 顺序、语义顺序或屏幕阅读器读取顺序。它不是“把列表倒过来”,而是让浏览器从大往小标号——这点必须先搞清,否则后续所有调试都可能跑偏。
reversed 是怎么算起始编号的?
浏览器会自动推导
值:5 个
加
,就默认设
,显示为
;如果手动加了
,就会变成
。
常见误用:
以为
能“自动补足当前最大序号”,实际它完全不感知内容数量变化
动态增删
后编号断裂,因为
不触发重算,得手动调
配合
时,
显示为
,但用户可能预期是字母表末尾倒排(
),这逻辑不一致
reversed 和 value 属性混用会怎样?
是
的属性,只影响单个项的显示编号,后续项仍按该值 +1 递增,
对此无干预能力。
立即学习
“
前端免费学习笔记(深入)
”;
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
例如:
渲染结果是:
→
→
,不是倒序的
。因为
只在没
时才接管编号逻辑。
什么时候不能只靠 reversed?
当需求本质是“内容顺序要变”(比如最新评论置顶、历史事件从近到远),
就只是视觉障眼法:
屏幕阅读器仍按原始 DOM 顺序朗读,无障碍失效
键盘 Tab 焦点顺序不变,交互流错位
用
会翻转整个布局流,嵌套子元素、伪元素定位、滚动锚点都可能异常
最稳妥的方式仍是服务端或 JS 层反转数据源,再生成
—— 编号、DOM、语义、可访问性全部对齐
真正关键的判断点在于:这个“倒序”是纯展示需求,还是承载语义权重?如果是后者,别碰
,直接动数据源。
reversedstartlireversedstart="5"5. 4. 3. 2. 1.start="10"10. 9. 8. 7. 6.reversedlireversedol.setAttribute('start', newStart)type="a"reversedstart="3"c.z., y., x.valuelireversed
- A
- B
- C
8. A9. B10. C8. 7. 6.reversedvaluereversedflex-direction: column-reverse
reversed