如何在CSS中使用:nth-child(-n+3)快速选择前三个元素-css教程-PHP中文网

:nth-child(-n+3)匹配父元素中位置为第1、2、3的子节点（无论类型），依赖所有子节点（含文本、注释）的物理序号；混入非目标标签或空白节点时易失效，此时应改用:nth-of-type(-n+3)或显式声明。

如何在css中使用:nth-child(-n+3)快速选择前三个元素

什么是 `:nth-child(-n+3)` 的实际含义

这个伪类不是“选前三个”，而是“选所有满足 n ≤ 3 的第 n 个子元素”——它依赖于元素在父容器中的**物理位置**，且只匹配那些**恰好是第 1、2、3 个子节点**的元素，不管它们是什么类型或有没有 class。

常见误解是以为它像 :nth-of-type() 那样按元素类型筛选，但它不是。比如父元素里第 1 个是

、第 2 个是 

											
												
												
													CSS婚礼策划服务机构宣传网站模板
													CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
												
												下载
												
											
										、第 3 个是 ，这三者都会被选中；但如果第 2 个是注释节点或文本节点（非元素节点），那第 2 个  实际可能是第 3 个子元素，就可能被跳过。什么时候用 :nth-child(-n+3) 真正有效
它最适合结构干净、子元素全是目标类型且顺序可控的场景，比如手写列表、卡片容器、表格行（）等。

父元素下只有你要操作的元素，没有空格文本节点（HTML 中换行缩进会生成 text node）
不需要兼容 IE8 及更早版本（:nth-child 在 IE9+ 支持）
你明确要基于“位置序号”而非“类型序号”做样式控制
不和 JavaScript 动态插入/删除元素混用——因为 DOM 变动后序号重排，样式会意外变化


:nth-child(-n+3) 和 :nth-of-type(-n+3) 的关键区别
如果父元素混有多种标签，比如：


A
  not a list item
  B
  C
  also not

那么：


li:nth-child(-n+3) → 只匹配第一个 
（它是第 1 个子元素）， 是第 2 个子元素所以不匹配，第二个 
 是第 3 个子元素 → 匹配，第三个 
 是第 4 个子元素 → 不匹配。结果：只选中 A 和 B

li:nth-of-type(-n+3) → 忽略  和 ，只数 
：A 是第 1 个 
，B 是第 2 个，C 是第 3 个 → 全部匹配
容易被忽略的 DOM 细节导致失效
最常见的“写了但没生效”，往往不是语法错，而是 DOM 结构干扰了子元素序号：

HTML 换行缩进产生空白 text node，让第一个目标元素变成第 2 个子节点
使用了 Vue/React 等框架，模板编译后插入了注释节点（如 ）
父元素内有 <script></script> 或  标签（虽不渲染，但算子节点）
用了 display: contents 的子元素不参与盒模型，但仍计入 :nth-child 计数

调试时可用浏览器开发者工具的 Elements 面板右键「Break on > subtree modifications」，再检查 childElementCount 和 childNodes.length 是否一致。
真正想“稳稳选前三个目标元素”，多数情况下应优先考虑加 class（如 .featured）或改用 JS 控制，而不是押注于 DOM 序号的稳定性。