:nth-child(-n+3)匹配父容器中物理顺序第1、2、3个子元素，不区分标签类型；而:nth-of-type(-n+3)仅匹配前三个同类型元素，二者混用会导致意外选中非目标标签。
什么是 :nth-child(-n+3) 的实际匹配逻辑
它不是“取前三个”，而是“匹配位置满足 -n+3 ≥ 1 的元素”——即当 n = 1, 2, 3 时，计算结果分别是 2, 1, 0，但 CSS 中索引从 1 开始，所以实际生效的是让第 1、2、3 个子元素命中。关键点在于：它只看元素在父容器中的**物理顺序位置**，不区分类型。
常见误解是以为它能跳过非目标标签（比如 <li> 间的 <div>），但其实只要在 DOM 树中排第 1/2/3，无论是什么标签都会被选中。
:nth-child(-n+3) 和 :nth-of-type(-n+3) 混用会出什么问题
如果列表里夹杂了其他标签（比如 <ul><li>A</li><div>spacer</div><li>B</li><li>C</li></ul>），:nth-child(-n+3) 会选中第 1 个 <li>、那个 <div>、第 2 个 <li>（因为它们分别位于第 1、2、3 位）；而 :nth-of-type(-n+3) 只数 <li>，所以稳稳选中前三个 <li>。
- 要严格按标签类型选前 N 个，必须用
:nth-of-type() -
:nth-child()适合结构干净、无插件或分隔符的纯列表 - 浏览器兼容性没区别，两者都支持 IE9+
为什么给前三个加背景色时样式没生效
最常踩的坑是选择器权重不够，或者被后续规则覆盖。比如：
立即学习“前端免费学习笔记（深入）”；
li:nth-child(-n+3) { background: #eee; }
li { background: #fff; }
后一条规则虽然简单，但因为 li 是元素选择器，而 li:nth-child(-n+3) 是复合选择器，**权重相同（都是 0-1-1）**，后声明的会覆盖前一个。
- 加
!important是临时解法，但推荐提高权重：ul li:nth-child(-n+3) - 检查是否父容器用了
display: flex或grid—— 此时:nth-child仍按 DOM 顺序，不是视觉顺序 - 动态插入元素后，序号重算，新插入的第 1 个也会被选中（不是“固定前三个”）
替代方案：用 JavaScript 动态加 class 更可控吗
如果需要真正“锁定最初渲染的前三个”，而不是响应式地随 DOM 变化更新，JS 确实更可靠：
document.querySelectorAll('li').forEach((el, i) => {
if (i < 3) el.classList.add('top-three');
});
但要注意：
- 它不响应后续 DOM 变化（比如删掉第一个，剩下的不会自动补位）
- 服务端渲染时 JS 还没执行，CSS 方案对首屏更友好
- 如果列表由框架（React/Vue）管理，直接用 key 或 index 控制 class 更自然
真实项目里，别默认以为 :nth-child(-n+3) 就是“安全的前三个”——得先确认结构是否纯净、是否需要响应变化、是否会被其他样式压制。
