可使用reversed属性(html5原生)、css counter重置与递减、flex-direction+order视觉反转、javaScript动态注入四种方法实现ol倒序编号,其中reversed最简洁语义化。

如果您希望HTML中的有序列表(ol)按倒序显示数字,例如从10、9、8…开始递减,而非默认的1、2、3…递增,则可通过CSS的counter-reset与counter-increment属性配合::before伪元素实现。以下是多种可行方法:
一、使用reversed属性(原生html5方案)
HTML5为<ol></ol>标签新增了reversed布尔属性,可直接启用倒序编号,无需CSS干预,且语义清晰、兼容性良好(chrome 12+、firefox 14+、edge 13+、safari 11+均支持)。
1、在<ol></ol>标签中添加reversed属性,如:<ol reversed></ol>。
2、保持列表项<li>顺序不变,浏览器将自动从最大值开始倒排编号。
立即学习“前端免费学习笔记(深入)”;
3、若需指定起始数值,可同时添加start属性,例如<ol reversed start="15"></ol>,此时列表将显示15、14、13…
二、使用CSS counter重置与递减(完全可控方案)
通过CSS自定义计数器,可精确控制起始值、步长及方向,适用于需要非连续倒序(如偶数倒排)、或对<ul></ul>等无序列表也实施倒序编号的场景。
1、为<ol></ol>或父容器设置counter-reset,初始值设为所需最大编号加1,例如倒排10项则设counter-reset: item 11。
2、为<li>设置counter-increment: item -1,使每次出现时计数器减1。
3、用li::before插入计数器内容:content: counter(item)。
4、确保移除默认列表标记:list-style: none。
本程序源码全部公开,仅供学习交使用,请误用于商业用途,网页编辑器采用的是FreeTextBox。主要功能模块如下:常规管理 基本设置 | 友情链接 新闻中心 添加新闻 | 管理新闻 作品展示 分类管理 | 作品管理 | 添加作品 | 设想中… 人才招聘 招聘列表 | 添加招聘 关于我们 关于我们 | 添加新项 其它管理 管理员密码变更 客户留言管理 上传图片
0 三、使用flex-direction + order属性(视觉倒序方案)
该方法不改变列表语义编号逻辑,仅反转dom元素在页面上的渲染顺序,适用于仅需视觉倒置、无需编号变化的场景;但列表项实际DOM顺序未变,屏幕阅读器仍按原始顺序朗读。
1、为<ol></ol>或<ul></ul>容器设置display: flex和flex-direction: column-reverse。
2、为每个<li>设置order值,例如使用css选择器li:nth-child(1) { order: 10; }逐项反向赋值。
3、为避免手动写10条规则,可结合CSS自定义属性与calc()动态计算,例如:li { order: calc(11 - var(--index)); },并为每个<li>添加style="--index: 1;"等内联变量。
四、javascript动态注入倒序值(动态内容适配方案)
当列表项由脚本动态生成、或需根据实时数据长度自动计算倒序编号时,可借助JavaScript遍历并设置data-counter属性或textContent,再由CSS或内联样式呈现。
1、获取所有<li>节点,存入数组const items = Array.from(document.querySelectorAll('ol.reverse-list li'))。
2、计算总数量const total = items.Length。
3、遍历数组,为每项设置data-counter属性值为total - index,例如第0项设data-counter="10",第1项设data-counter="9"。
4、CSS中使用li::before { content: attr(data-counter); }显示该值,并设list-style: none隐藏默认标记。