默认从1开始编号，语义化表达排行榜；需高亮首名用:first-child；移动端截断加list-style-position:inside；倒序显示用flex-direction:column-reverse而非颠倒html顺序。
用 <ol></ol> 默认渲染就是排行榜前十名
浏览器对 <ol></ol> 的默认行为就是从 1 开始递增编号，正好对应排行榜第 1 名到第 10 名。不需要额外设置 start 或 CSS 计数器，直接写就对了。
常见错误是手动写数字（比如 <li>1. 某选手</li>），这样既难维护，又无法语义化，屏幕阅读器也读不出序号逻辑。
- 正确写法：
<ol> <li>张三</li> <li>李四</li> <!-- ... --> </ol> - 如果榜单要从第 3 名开始显示（比如只展示 top3–top10），才需要
start="3" - 注意：不要用
<ul></ul>+ 手动加 “1.”“2.” 文本，那只是视觉模拟，不是真正有序列表
想让第 1 名高亮？用 :first-child 或 :nth-child(1)
排行榜首名通常需要视觉强调，比如加粗、变色、加图标。CSS 里直接选中第一个 <li> 最简单可靠。
-
<ol class="rank">...</ol>配合.rank li:first-child { font-weight: bold; color: #ff6b35; } - 避免用
:nth-of-type(1)—— 它在<ol></ol>里和:first-child效果一样，但语义不如后者清晰 - 如果后续要支持「并列第 1 名」（需两个
<li>都标红），就得加 class 控制，不能只靠伪类
移动端小屏下数字被截断？检查 list-style-position
某些安卓 WebView 或老版 Safari 会把默认的 outside 编号画在容器外，导致左边缘被裁，看起来像“少了个 1”。这不是内容没渲染，是定位问题。
- 加一句 CSS：
ol { list-style-position: inside; }，让数字进内容区 - 副作用：编号会参与文本流，可能轻微影响行高或对齐，但对排行榜影响极小
- 如果用了自定义计数器（
counter-reset），必须显式设list-style: none并用::before插入，此时list-style-position不生效
需要倒序显示（第 10 名在前）？别改 HTML 顺序，用 CSS flex-direction: column-reverse
有人为“倒榜”把 <li> 顺序写反，结果语义全乱——DOM 顺序和逻辑顺序不一致，键盘导航、屏幕阅读器、SEO 都会出错。
- 保持 HTML 从第 1 名到第 10 名正序书写
- 用
ol { display: flex; flex-direction: column-reverse; }翻转视觉顺序 - 注意：翻转后
:first-child变成原来最后一个元素，高亮逻辑要同步改成:last-child或加 class
实际排版时最容易被忽略的是语义与视觉的分离：编号是否真实反映排名逻辑，比“看起来像榜单”重要得多。一旦加了 JS 动态插入、服务端分页或并列名次，纯靠 <ol></ol> 自增就不够用了，得提前留好 class 或 data 属性接口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
