reversed 属性仅对 有效，仅视觉倒序编号（如 3→2→1），不改变 dom 顺序、tab 焦点流或屏幕阅读器读取顺序；与 start 共用时起始值为首个显示编号， 不支持该属性。
用 reversed 属性倒序显示有序列表编号
只对 <ol></ol> 有效，<ul></ul> 不支持；它仅反转编号显示（3→2→1），不改变 DOM 顺序、Tab 焦点流或屏幕阅读器读取顺序。
常见错误是把它当成“让列表从最新项开始排”，其实它只是视觉编号倒着标——数据仍是原顺序。比如 <ol reversed>
<li>A</li>
<li>B</li>
<li>C</li>
</ol> 渲染为：
3. A
2. B
1. C
但 DOM 中第一个 <li> 还是 A，键盘 Tab 仍先聚焦 A。
-
reversed是布尔属性，写成reversed或reversed="reversed"效果一样 - 和
start共用时，起始值是“第一个显示的编号”：如<ol start="5" reversed></ol>显示为 5.、4.、3.，不是 5.、4.、3.、2.、1.（除非你恰好有 5 项） - 不能用于无序列表
<ul></ul>，加了也无效
用 start 和 type 控制编号起点与样式
start 指定的是“第一项显示的数字/字母位置”，不是跳过几项；type 决定编号序列类型，二者配合才能得到预期效果。
例如：<ol type="a" start="3"></ol> → 第一项显示为 “c.”（因为 a=1, b=2, c=3）；<ol type="I" start="2"></ol> → 第一项显示为 “II”。注意 start 值必须是整数，不支持直接写 start="c"。
-
type值区分大小写含义不同："a"是小写字母，"A"是大写字母，"i"和"I"同理 -
start对带value的<li>无效：如果某项写了<li value="10">，后续项就从 11 开始，不管start设多少 - 动态插入新
<li>后，编号不会自动重算——浏览器只按初始顺序 +start+value推进
用 CSS flex-direction: column-reverse 视觉翻转任意列表
这是唯一能同时翻转 <ul></ul> 和 <ol></ol> 显示顺序的方法，但会同步反转 DOM 顺序、Tab 流和屏幕阅读器顺序。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
做法是给列表设 display: flex + flex-direction: column（正序）或 column-reverse（倒序）。别用 order 逐个调节点顺序——项一多就失控，且无法响应式维护。
- 必须确保子元素是块级（默认
<li>就是），否则可能换行错乱 - 若需保持可访问性不变（比如键盘用户仍要从原始第一项开始 tab），就不能单靠这个，得额外加
aria-reversed="true"并配合 JS 调整焦点逻辑 - 在 Flex 容器里，
margin行为可能变化，尤其上下间距，建议用gap替代
用 JavaScript 真正反转 DOM 顺序（慎用）
只有当你明确需要 DOM 节点物理顺序改变时才用，比如依赖 firstElementChild 的第三方组件、服务端渲染一致性要求、或某些老式轮播逻辑。
安全做法是用 while (listEl.lastElementChild) 循环取出并 prepend() 到父容器，避免索引错位或事件丢失。IE 不支持 prepend()，得回退到 insertBefore(child, listEl.firstChild)。
- 别用
Array.from(listEl.children).reverse().forEach(...appendChild)—— 移动过程中children动态变化，会导致漏项或重复 - 别用
innerHTML拼接字符串——所有绑定事件、表单状态、自定义元素生命周期全丢 - 超过 500 项建议分帧处理，比如每帧操作 20 项，用
requestAnimationFrame防卡顿
真正难的不是怎么翻转，而是翻转之后是否还符合语义、可访问性和交互预期——多数场景下，数据层反转（JS 数组 .reverse() 后重 render）比 DOM 层反转更干净可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
