ol 标签仅按 html 中的书写顺序渲染编号，不自动排序；type 和 start 仅控制编号样式与起始值，不影响 dom 顺序；视觉倒序可用 flex-direction: column-reverse，但需配合 aria-reversed；真正排序须用 javascript 安全重排 dom 节点。
ol 标签本身不排序内容，它只按你写入的顺序渲染编号——想让事项“按逻辑/优先级/时间”自动排序，必须用 JavaScript；纯 HTML 只能手动排好顺序再套 ol。
用 ol + type 和 start 控制编号样式与起始值
这是最常用也最容易出错的地方：很多人以为 type="A" 或 start="3" 能让列表“智能排序”，其实它们只改显示符号，不碰 DOM 顺序。
-
type只影响编号外观：type="i"渲染为 i, ii, iii；type="1"（默认）是 1, 2, 3 -
start是硬编码起始数字，比如<ol start="5"></ol>第一项就标成 5，后续仍是 6、7……不是“从第 5 条开始显示” - 若中间穿插了其他内容（如说明文字、
div），ol不会跳过——它只数自己内部的li
用 CSS flex-direction: column-reverse 视觉倒序（但 DOM 不变）
如果你只是想把最后一条“看起来”在最上面（比如日志列表最新项置顶），可以用这个技巧。但它不改变实际 DOM 顺序，对屏幕阅读器、Tab 键导航、或依赖 li:nth-child(1) 的 JS 都有影响。
- 给
ol加display: flex; flex-direction: column-reverse; - 别用
order属性逐个调换，动态列表里维护成本爆炸 - 如果需要可访问性支持，得额外加
aria-reversed="true"并同步管理焦点流
用 JavaScript 真正重排 li 的 DOM 顺序
这才是“让事项按优先级/日期/名称自动排序”的正解。关键不是排序算法，而是安全操作 DOM 节点——直接 innerHTML 拼接会丢事件，Array.from().reverse() 容易索引错乱。
- 用
document.querySelectorAll('li')获取节点列表，再转数组：[...list.querySelectorAll('li')] - 提取排序依据：用
dataset.priority或getAttribute('data-date')，比直接读textContent更可靠 - 排序后逐个
appendChild()回原ol——DOM 会自动移除原位置，不用先remove() - IE 不支持
prepend()，但appendChild()全平台安全
容易被忽略的兼容性与性能点
当列表项超过 200 条，或每项含复杂子结构（如图片、嵌套组件）时，频繁 DOM 插入会卡顿。这时候不能只盯着排序逻辑。
- 别在每次点击都遍历全部
li提取文本——提前缓存data-sort值到属性里 - 避免在排序函数里反复调用
new Date()或parseFloat()，先映射一次转换好 - 移动端拖拽排序（
draggable="true"）和 JS 排序不要混用，状态容易冲突 -
ol的reversed属性是无效的：HTML 标准根本不支持这个属性，浏览器会忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
