CSS :nth-child选择器匹配规则疑问：为何部分参数选中全部元素

核心结论：:nth-child(n) 匹配的是在它的直接父元素的所有子节点（包括文本节点、元素节点，空白文本节点可能被浏览器合并）中，排在第n位的元素节点。注意计数从1开始，且包含父元素下的所有类型子节点，不只是元素。

你的案例拆解 #

一、为什么用:nth-child(2)看起来选中了所有元素？ #

你的CSS是全局生效的（未限定元素类型），相当于*:nth-child(2)，结合HTML结构分析：

1. 第一个<div>内部的子节点（浏览器会把换行、空格、可见文本都算作文本节点）：
   • 第1个：文本节点（hello+换行空格）
   • 第2个：<h1>test</h1> → 该元素是父div的第2个子节点，匹配规则，被设置为蓝色
   • 后续<p>元素是第3、4...位，不匹配，但如果父元素被其他规则选中（比如:nth-child(1)的情况），子元素会继承父元素的蓝色，导致你误以为所有元素都被直接选中
2. 第二个<div>内部的子节点：
   • 第1个：空白文本节点（换行空格）
   • 第2个：<span>hey</span> → 匹配规则，被设置为蓝色

你看到的“所有元素变蓝”，本质是部分父元素或元素节点被选中后，子元素继承了颜色，而非所有元素都直接匹配:nth-child(2)。

二、:nth-child(1)的情况 #

:nth-child(1)会选中所有父元素下的第1位元素节点：

• 第一个<div>是<body>的第1个子元素，匹配规则，被设置为蓝色
• 它内部的<h1>、<p>等子元素会继承这个蓝色，导致整个区块文本变蓝，让你误以为所有元素都被选中
• 第二个<div>是<body>的第2个子元素，不匹配；<p>hello</p>是第3个，也不匹配

三、:nth-child(3)只选中“two”和“hello”的原因 #

1. 对于<p>two</p>：
   浏览器可能合并了第一个<div>里的空白文本节点，导致内部子节点计数变为：
   • 第1个：<h1>test</h1>
   • 第2个：<p>one</p>
   • 第3个：<p>two</p> → 匹配规则，变蓝
2. 对于<p>hello</p>：
   它是<body>的第3个子元素（前面两个是两个<div>），匹配:nth-child(3)，变蓝
3. 其他元素不在父元素的第3位，因此不被选中

关键注意点 #

• 计数包含所有子节点：文本节点（包括空白、换行）都会被计入位置，不是只算元素节点
• 继承的干扰：父元素被选中后，子元素会继承样式，容易让你误以为子元素直接匹配了选择器
• 限定元素类型的用法：如果只想选父元素下的第2个<p>，应该用p:nth-child(2)——它会先找父元素下的第2个子节点，再判断该节点是否为<p>，符合条件才匹配

内容的提问来源于stack exchange，提问作者supersan