HTML5 的 ol 标签 reversed 属性原生支持倒序编号，自动按项数推算起始值（如 5 项则从 5 开始），是布尔属性；可与 start 共存但后者会覆盖自动值；不支持 IE，兼容场景需用 CSS counters 或 JS 实现。
ol 标签的 reversed 属性直接生效
HTML5 原生支持倒序编号，不需要 CSS 或 JS。只要给 <ol> 加上 reversed 属性，浏览器就会从最大数字开始递减：10、9、8……
注意它不是“手动指定起始值”，而是自动按列表项数量推算起始编号。比如有 5 个 <li>，就从 5 开始倒数。
-
reversed是布尔属性，写上即生效，无需赋值（reversed="true"反而多余） - 和
start属性可共存，但start会覆盖自动推算的起始值；例如<ol reversed start="20">会显示 20、19、18…… - 不支持 IE（包括 IE11），如需兼容旧浏览器，得用 CSS counters 或 JS 模拟
CSS counter-reset + counter-increment 手动控制
当需要更灵活的倒序逻辑（比如固定从 100 开始，不管项数多少），或必须兼容 IE 时，CSS 方案更可靠。
核心是把计数器设为高值，再每次递减：
立即学习“前端免费学习笔记（深入）”；
<ol class="reverse-count"> <li>第一项</li> <li>第二项</li> </ol>
对应 CSS：
.reverse-count {
counter-reset: item 100; /* 起始值设为 100 */
}
.reverse-count li {
counter-increment: item -1; /* 每次减 1 */
}
.reverse-count li::before {
content: counter(item) ". ";
}- 必须显式设置
counter-increment为负值（如-1），否则仍是正向 -
counter-reset的初始值要大于等于项数，否则会出现 0 或负数编号 - 该方案完全脱离 HTML 结构，连
<ol>都可换成<div>，自由度高但语义性弱
JavaScript 动态生成倒序编号（适合异步/动态列表）
如果列表项是 JS 动态插入、或需根据数据字段决定顺序（比如按时间倒序但编号仍要 1→2→3），就不能只靠 HTML 或纯 CSS。
最简做法：遍历 <li>，用 setAttribute('value', ...) 写入编号：
const items = document.querySelectorAll('ol.dynamic-reverse li');
items.forEach((li, i) => {
li.setAttribute('value', items.length - i);
});-
value属性仅对<li>生效，且只影响编号显示，不影响 DOM 顺序或语义 - 在数据渲染后调用，比如 Vue 的
nextTick、React 的useEffect里执行 - 注意：若列表后续增删，需重新运行这段逻辑，否则编号会错位
常见坑：reversed 和 start 混用时的行为
很多人以为 reversed start="3" 就是从 3 开始倒数，结果发现显示的是 3、2、1、4、3……——这是因为 start 在 reversed 下的含义变了。
- 标准行为：
reversed会让浏览器先算出总项数n，再从n开始倒数；start则强行把第一个<li>设为该值，后续仍递减（3→2→1），但第 4 项会回绕成start - 3，也就是 0 - 真正想要“从 3 开始且只有 3 项”，得写
<ol reversed start="5">（因为 5→4→3），但这依赖项数固定，非常脆弱 - 结论：除非明确需要“从某大数开始递减”，否则别混用
reversed和start；有定制需求，直接上 CSS counters
倒序编号看着简单，但 reversed 的自动推算逻辑、start 的隐式覆盖、以及跨浏览器一致性，三者叠加最容易出意料之外的编号。实际项目里，建议优先用 reversed，卡在兼容性或逻辑复杂时，再切到 CSS counters 方案。
