html如何设置倒序列_使用CSS设置HTML列表倒序显示【列表】

可使用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。

标签： css javascript java html html5 伪元素 浏览器 edge safari css选择器