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 可能复用旧节点，计数器状态残留

实际做榜单页时，编号逻辑和 DOM 结构的耦合度比想象中高；哪怕只是加个加载中占位符，都可能让 :nth-child 失效。动手前先想清楚：这个榜单是静态 HTML、AJAX 拉取，还是 WebSocket 实时刷新？不同路径，重置计数器的方式完全不同。