最直接方案是用CSS类+JS动态添加top-1/2/3类名：先清除旧类，再按索引i=0/1/2分别添加对应类，配合CSS定义差异化样式，并在每次排序或DOM更新后重新执行该逻辑。
用 CSS 类 + JavaScript 动态加 top-1 / top-2 / top-3 最直接
不需要框架，纯 HTML + CSS + JS 就能稳稳实现。核心是：给前三名的 <li> 或 <tr> 元素动态加上对应 class，再用 CSS 控制颜色、背景或边框。
<p>常见错误是直接改 <code>style.color，结果后续排序变动或数据刷新时样式残留、错位。用 class 控制更可靠，也方便复用和主题切换。
- 确保每条排行榜项有唯一可识别的容器（比如
<li class="rank-item">） - JavaScript 拿到所有项元素后，按顺序遍历，对前三个调用
element.classList.add("top-1")等 - 别忘了清除旧的 top 类：每次高亮前先用
element.classList.remove("top-1", "top-2", "top-3") - 如果数据来自 API，务必在
then()或await后再执行高亮逻辑，否则 DOM 还没更新
querySelectorAll 配合 forEach 是最简实现路径
假设 HTML 结构是无序列表：
<ul id="ranking"> <li>张三</li> <li>李四</li> <li>王五</li> <li>赵六</li> </ul>
JS 只需这几行：
立即学习“前端免费学习笔记（深入）”；
const items = document.querySelectorAll("#ranking li");
items.forEach((item, i) => {
item.classList.remove("top-1", "top-2", "top-3");
if (i === 0) item.classList.add("top-1");
if (i === 1) item.classList.add("top-2");
if (i === 2) item.classList.add("top-3");
});
注意：索引 i 从 0 开始，所以第 1 名是 i === 0；别写成 i 后统一加一个 class——那样无法区分金银铜视觉层级。
CSS 里用 .top-1 / .top-2 / .top-3 分开定义更灵活
不要只靠颜色区分，用户可能色弱。推荐组合使用：
-
.top-1：金色渐变背景 + 白字 +text-shadow加强可读性 -
.top-2：银灰色背景 + 深灰字 + 左侧竖条border-left: 4px solid #c0c0c0 -
.top-3：古铜色背景 + 深棕字 +font-weight: bold - 所有 top 类加
transition: all 0.2s ease，让增删项时高亮变化更自然
如果用 CSS 自定义属性（--top-1-bg），后续换主题只需改变量，不用动 JS。
排序变动时必须重新运行高亮逻辑
用户点击“按积分排序”或“按时间倒序”，DOM 顺序变了，但 class 不会自动同步——这是最容易被忽略的点。
解决方案很明确：
- 把高亮逻辑封装成函数，例如
highlightTopThree() - 每次排序完成、插入新 DOM、或调用
renderList()后，立刻调用它 - 如果用了
MutationObserver监听#ranking子节点变化，也要在里面触发高亮（但多数场景没必要，手动调用更可控） - 避免在
setTimeout里延迟执行高亮——不可靠，尤其在低配设备上
真正麻烦的不是第一次高亮，而是数据活起来之后，class 跟不上 DOM 顺序的变化。盯住这个点，基本就不会翻车。
