如何在HTML中创建索引递减的有序列表

方法1：使用HTML原生reversed属性（最推荐） #

直接给你的<ol>标签添加reversed布尔属性即可，浏览器会自动对有序列表的序号做递减排序，不需要其他额外配置。如果需要自定义起始序号，搭配start属性即可，比如<ol reversed start="15">就会从15开始倒序排列。

修改后的代码如下：

<ol type="1" reversed>
    <li>ten</li>
    <li>nine</li>
    <li>eight</li>
    <li>seven</li>
    <li>six</li>
    <li>five</li>
    <li>four</li>
    <li>three</li>
    <li>two</li>
    <li>one</li>
</ol>

这个属性是HTML5标准内置功能，兼容所有主流现代浏览器，适配你的评分场景完全够用。

方法2：使用CSS计数器自定义实现 #

如果后续你需要对序号样式做更多自定义调整（比如修改序号颜色、添加前后缀等），可以用CSS计数器实现递减逻辑：

<style>
.reverse-ol {
  list-style: none;
  /* 起始值设为比最大序号大1，这里你有10个元素，所以设11 */
  counter-reset: custom-counter 11;
}
.reverse-ol li {
  /* 每次遍历li计数器减1 */
  counter-increment: custom-counter -1;
}
.reverse-ol li::before {
  /* 拼接序号展示格式，可根据需求调整样式 */
  content: counter(custom-counter) ". ";
  margin-right: 4px;
}
</style>

<ol class="reverse-ol">
    <li>ten</li>
    <li>nine</li>
    <li>eight</li>
    <li>seven</li>
    <li>six</li>
    <li>five</li>
    <li>four</li>
    <li>three</li>
    <li>two</li>
    <li>one</li>
</ol>

内容的提问来源于stack exchange，提问作者Zakaria Ayadi