reversed 属性仅对 有效， 不支持； 实现降序编号， 倒序需用 flex-direction: column-reverse 或数据层反转。
reversed 属性只对 <ol></ol> 有效，<ul></ul> 不支持
很多人试了 <ul reversed></ul> 发现没反应——不是你写错了，是浏览器根本不认。HTML 规范里 reversed 是 <ol></ol> 的布尔属性，专为有序列表设计，<ul></ul> 没有计数逻辑，加了也无效。
常见错误现象：<ul reversed>
<li>A</li>
<li>B</li>
</ul> 渲染结果仍是 A 在上、B 在下，序号也不变（因为本来就没序号）。
-
<ol reversed></ol>会让数字从大到小降序：比如 3, 2, 1（前提是没用start覆盖） - 若同时设
start="5"，则从 5 开始倒排：5, 4, 3… - 不支持 CSS 伪类
::marker直接改序号方向，它只响应 HTML 层的reversed
想让 <ul></ul> 或任意元素倒序？得靠 CSS flex-direction: column-reverse
这是最常用、兼容性好（IE10+）、语义清晰的方案。注意：它只是视觉翻转，DOM 顺序不变，对屏幕阅读器和键盘导航可能有影响。
实操建议：
- 给父容器加
display: flex和flex-direction: column-reverse，子项自然倒排 - 如果子项本身是块级且有 margin，倒序后上下 margin 可能意外合并，需检查布局
- 避免在
<ol></ol>上同时用reversed和column-reverse—— 序号按 HTML 逻辑生成（如 3,2,1），但视觉位置又翻一次，容易混乱
示例：
<div style="display:flex; flex-direction:column-reverse;"> <div>item 1</div> <div>item 2</div> <div>item 3</div> </div>
JavaScript 动态倒序时，别直接操作 innerHTML
用 innerHTML 拼接反转后的字符串，会销毁所有绑定的事件监听器、丢失表单值、触发重绘——尤其在列表频繁更新时，性能和稳定性都差。
更稳妥的做法：
- 用
Array.from(element.children).reverse()获取并反转 DOM 节点列表 - 再用
element.append(...reversedNodes)一次性重排（现代浏览器支持，不会丢失状态） - 如果需要保留原始节点引用（比如有 JS 控制的交互状态），优先用
element.insertBefore()手动移动，而非重建
服务端或构建时倒序比运行时更可靠
如果你的列表数据来自 API 或模板引擎（如 Jinja、Handlebars），在数据层就做 array.reverse() 或 | reverse 过滤，比前端 JS 或 CSS 翻转更可控。
原因很实在：
- 避免 CSS
column-reverse对辅助技术（如读屏软件）造成的顺序错乱 - 绕过
reversed在某些旧浏览器（如 IE9 及更早）完全不生效的问题 - 减少客户端计算负担，尤其列表项多、含复杂组件时
真正要小心的是：倒序逻辑分散在 HTML、CSS、JS 多处时，很容易一处改了另一处没同步，最终列表行为不一致。统一在数据源头处理，反而最省心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
