css计数器是实现自动编号的可靠方案，需在父容器设counter-reset、li上设counter-increment，并用:before和content: counter()渲染；动态更新时须主动重置计数器状态。
用 counter-increment 实现自动编号，别手写 1–10
手动写 <li>1. </li> 看似省事，但改顺序、删条目、加新项时极易出错，尤其要同步更新数字和样式。CSS 计数器才是可靠解法——它不依赖 HTML 结构，纯靠样式驱动编号逻辑。
关键点：counter-reset 必须设在父容器（如 ul），counter-increment 放在每个 li 上；:before 里用 content: counter(section) 渲染数字。漏掉任一环，编号就消失。
-
ul没设counter-reset: section→ 所有li:before显示0或空白 - 把
counter-increment错写成counter-increment: section 2→ 编号跳变（1,3,5…） - 用
content: "第" counter(section) "名"时未声明中文字体 → 某些系统下“第”字 fallback 成方块
前三名高亮用 :nth-child(n)，但注意它认的是 DOM 顺序
:nth-child(1) 指的是 HTML 中第一个 li 元素，不是“榜单第 1 名”。如果列表开头插了广告 li 或隐藏项，高亮就会错位。真实榜单常需动态插入/过滤，这时得换思路。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 稳妥做法：给前三名的
li加 class，比如<li class="rank-1">，再写.rank-1:before - 若坚持用伪类，确保
li是ul下**唯一子元素**（无注释、无空格文本节点） -
:nth-child(3)和:nth-of-type(3)在混合标签时行为不同，这里只用li标签，选前者即可
移动端适配别只调 font-size，padding 和 line-height 同样关键
原代码里 line-height: 46px + height: 46px 在小屏上会挤占太多垂直空间，文字还可能被截断。单纯缩放字体解决不了行高塌陷问题。
- 用
rem或em统一控制line-height、padding、font-size，让它们同比例缩放 - 对
li:before的height和line-height单独设为1.2em，避免固定像素导致圆角变形 - 测试真机时发现 iOS Safari 对
box-shadow渲染偏淡，可加transform: translateZ(0)强制 GPU 加速
数据动态注入时，counter-reset 不会重置？那是你没清空旧状态
用 JS 替换 ul 内容后，编号常从上次结束处继续（比如上次显示到 8，新列表又从 9 开始）。这是因为计数器状态保留在渲染树里，没被重置。
- 最简方案：替换前先清空
ul，再innerHTML = 新HTML，而非直接insertAdjacentHTML - 更可控方式：JS 中调用
getComputedStyle(ul).counterReset无效，得用ul.style.counterReset = 'section'主动重置 - 若用框架（Vue/React），确保 key 值随榜单数据变化，否则虚拟 DOM 可能复用旧节点，计数器状态残留
:nth-child 失效。动手前先想清楚：这个榜单是静态 HTML、AJAX 拉取，还是 WebSocket 实时刷新？不同路径，重置计数器的方式完全不同。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
