:nth-child(-n+3)常高亮错人，因其按所有子元素计数，遇标题、广告或空白节点即偏移；应优先用:nth-of-type(-n+3)按同标签计数，结构复杂时须用js手动选取前三个目标元素。
为什么:nth-child(-n+3)常在榜单里“高亮错人”
它确实能匹配前三个子元素，但前提是这三个人都得是目标标签（比如 li 或 div.card），且中间不能插任何其他节点。实际榜单 HTML 很少干净：可能有 <h3>本周榜单</h3>、<div class="ad-banner">、甚至换行产生的空白文本节点——这些全会被 <code>:nth-child() 当成“第1个”“第2个”来计数，导致真正前三名变成第4、5、6个子元素，压根不匹配。
怎么写才真能高亮前三名
优先用 :nth-of-type(-n+3)，它只统计同标签的兄弟元素，无视中间混入的 h3、div 或注释：
ol li:nth-of-type(-n+3) { font-weight: bold; color: #e74c3c; }
- 适用场景：所有榜单项都是
li（如<ol> <li>第一名</li> <li>第二名</li> </ol>） - 不适用场景：榜单项是
div.card但父容器里还有header、section等同级元素——此时div.card:nth-of-type(-n+3)仍可能失效，因为浏览器把所有div都算进“type”里，不区分 class - 若必须用 class 区分（如
<div class="rank-item">），CSS 无法先过滤再取前 N，<code>.rank-item:nth-child(-n+3)是错觉，.rank-item:not([data-skip]):nth-child(-n+3)也不行——:not()和:nth-child()是并行判断，不是管道动态榜单或结构不可控时的兜底方案
纯 CSS 在真实业务中经常失灵，尤其服务端注入广告、前端框架（React/Vue）插入占位符、或 SSR 渲染带注释节点时。这时直接用 JS 控制更可靠：
document.querySelectorAll('.rank-item').slice(0, 3).forEach(el => el.classList.add('top-3'));- 后续样式写
.top-3 { ... }即可，完全绕过 DOM 位置陷阱 - 如果榜单会增删（比如实时刷新），记得每次更新后重新执行这段逻辑，或用
MutationObserver监听 - 注意：不要依赖
innerHTML替换后立刻查:nth-child，DOM 树索引不会自动重算，JS 手动选才是唯一稳态
验证你到底选中了谁
别信开发者工具里的高亮，它可能只是样式叠加效果。打开控制台，跑这两行：
console.log($$('ol li:nth-child(-n+3)').length); console.log($$('ol li:nth-of-type(-n+3)').length);两个数字不一致？说明 DOM 里有干扰节点。再执行：
$$('ol li').forEach((el, i) => console.log(`${i+1}:`, el.textContent.trim()));对照输出序号和内容，就能一眼看出「第3个
li」在 DOM 里其实是第几个子元素——这才是:nth-child()真正认的“3”。真正麻烦的不是公式记不住，而是默认以为“前三名”和“前三个子元素”是一回事；而现实里，DOM 总在悄悄塞进你不想要的节点。
- 后续样式写
