应先按积分降序排列数据再生成，不可依赖reversed或start属性；并列名次需手动设置value属性，视觉强化用class而非:first-child。
用 <ol></ol> 显示积分榜时，序号不按积分排序怎么办
HTML 的 <ol></ol> 默认按标签出现顺序编号，不是按数值大小自动排序。积分榜要“按积分从高到低排第1、第2…”，不能靠 <ol></ol> 自动实现——它只管你写了几个 <li>，不管里面是“积28分”还是“积12分”。
常见错误是直接写：
<ol> <li>广州队（28分）</li> <li>山东队（32分）</li> <li>浙江队（25分）</li> </ol>
结果序号仍是 1、2、3，但山东队实际该排第1。正确做法是：先按积分降序整理好数据顺序，再生成 <ol></ol> 标签。
- 后端渲染（如 PHP/Python）：查库时用
ORDER BY points DESC - 前端 JS 渲染：用
.sort()按points字段降序排列数组后再map()生成<li> - 纯静态页：手动把积分最高的队伍写在第一个
<li>，依此类推
reversed 属性对积分榜没用，别乱加
reversed 只反转编号方向（从大到小），比如 <ol reversed>
<li>A</li>
<li>B</li>
</ol> 会显示 “2. A / 1. B”。但它不改变内容逻辑顺序，也不排序数据——山东队（32分）如果仍写在第二位，加 reversed 只会让它显示为“第1名”，但 HTML 结构上它还是第二个 <li>，语义错乱，无障碍阅读器也会读错。
所以：reversed 适合倒计时、历史年份从近到远等天然逆序场景，不适合积分榜。
想让第1名样式突出？用 CSS 类比修改 start 更靠谱
start 属性（如 <ol start="1"></ol>）只能改起始数字，无法动态高亮第一名。真要视觉强化，推荐：
- 给第一名的
<li>加 class，比如<li class="rank-1">山东队（32分）</li> - 用 CSS 设置
.rank-1 { font-weight: bold; color: #e60012; } - 避免用
:first-child，因为如果后续加了标题行或空<li>，它就失效了
移动端适配和可访问性容易被忽略
积分榜常被截屏传播或用读屏软件查看，两个细节常出问题：
- 别用纯颜色区分名次（如红/黄/绿），要搭配图标或文字标识，比如加
<span aria-label="冠军">?</span> - 每行
<li>里把队名、积分、胜负场次用<span class="stat"></span>包裹，方便 CSS 独立控制换行和间距，防止窄屏下挤成一团 - 如果积分相同需并列名次（如两队同积30分，都算第2，下一队第4），
<ol></ol>本身不支持“跳号”，得靠 JS 动态写入value属性：<li value="2">山东队</li> <li value="2">上海队</li> <li value="4">北京队</li>
手动生成 value 是最稳的方式，CSS 计数器或 JS 排序后重设 start 都容易在增删队伍时出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
