:nth-child(-n+3)最简洁地选中父元素前三个直接子元素，但要求目标为直接子元素且按所有同级元素统一编号；若需按标签类型计数，应改用:nth-of-type(-n+3)。
用 :nth-child(-n+3) 直接选中前三个子元素
这是最简洁、语义最明确的方式。伪类 :nth-child(-n+3) 的数学逻辑是：当 n=1,2,3 时，表达式结果为正整数（3,2,1），因此匹配第 1、2、3 个子元素；n≥4 时结果≤0，不匹配任何元素。
它不依赖类名或结构假设，只要目标是「父容器下排在最前面的三个直接子元素」，就该优先用这个。
- 必须确保目标元素是父元素的**直接子元素**，否则
:nth-child会按所有同级子元素（包括<p></p>、<div>、<code><span></span>等）统一编号计算 - 如果父元素开头有其他类型元素（比如一个
<h2></h2>标题），那第一个<div> 可能是第 2 个子元素，<code>:nth-child(-n+3)仍会选中它——因为它是第 2 个子，不是第 1 个<div> <li>若需按**某类元素自身顺序**计数（如“前三个 .item”），应改用 <code>:nth-of-type或 JavaScript 配合data-index -
:nth-of-type只统计同标签类型的兄弟元素，忽略其他标签干扰 - 但不支持类名过滤，
.item:nth-of-type(1)无效——CSS 中没有.item:nth-of-class - 若结构混合且必须按类筛选，建议加统一类名后用
:nth-child，或用 JS 动态加标记类 - 推荐在重置样式或组件根选择器里统一设
box-sizing: border-box - 若仅对前三个加
padding: 12px，又没设box-sizing，背景色只覆盖 content 区域，留白明显 - Grid 或 Flex 子项若设置了
min-width或flex-grow，背景色会随尺寸拉伸，但background-size: cover在纯色场景无意义，慎用 - 优点：新增一个子元素，原第 3 个自动失去样式，新第 3 个立即获得，无需手动更新类名
- 陷阱：若用 AJAX 分页加载，每次 append 新
<div>，前三个可能频繁切换，造成闪烁或状态错乱（比如带 hover 动画的卡片） <li>此时更稳妥的做法是 JS 主动为前三个加临时类，如 <code>class="item is-top3"，再用.item.is-top3控制样式，把控制权从 CSS 计算转为显式标记
真正难的不是写出
避免误选：区分 :nth-child 和 :nth-of-type
常见错误是以为 :nth-child(1) 总是选中第一个 <div>，其实它选中的是「父元素中第 1 个子元素，且该元素恰好是 <code><div>」。如果 HTML 是：
<pre class="brush:php;toolbar:false;">.container > h2, .container > div, .container > div, .container > div</pre>
<p>那么 <code>div:nth-child(-n+3) 实际只会匹配第 2 和第 3 个 <div>（因为它们分别是第 2、3 个子元素），第 4 个 <code><div> 是第 4 个子，被排除。
<p>此时若想稳稳控制前三个 <code><div>，应写：
<p><code>div:nth-of-type(-n+3) { background-color: #ffebee; }
批量设背景时注意 box-sizing 和 padding 影响
给前三个子元素设背景色看似简单，但实际渲染常出偏差，主因是默认 box-sizing: content-box 下，padding 和 border 会撑大元素，导致背景色区域与视觉预期错位。
动态内容下 :nth-child 的稳定性问题
当 DOM 由 JS 动态插入、删除或排序时，:nth-child(-n+3) 会实时重算——这既是优点也是陷阱。
:nth-child(-n+3)，而是确认你选中的确实是「业务意义上的前三个」——它取决于 HTML 结构是否干净、是否允许被 JS 干扰、以及设计师对「前三个」的定义是否和浏览器解析一致。
