为什么CSS子组合选择器>在部分场景下会选中孙辈元素？

这一现象和CSS子组合选择器的规则无关，问题出在HTML的标签解析规则上：

• HTML规范明确规定，<p>段落元素不允许嵌套其他块级元素，也不能嵌套另一个<p>元素。当浏览器解析到未闭合的<p>内部出现新的<p>标签时，会自动为前一个<p>插入闭合标签，再解析后续内容。

你写的HTML结构：

<div>
    <p>p #1，是div的子元素。
      <p>p #2，是div的孙辈元素。</p>
    </p>
</div>

被浏览器实际解析后的DOM结构为：

<div>
    <p>p #1，是div的子元素。</p>
    <p>p #2，是div的孙辈元素。</p>
    <!-- 你手写的第一个<p>的闭合标签会被判定为无效标签被忽略 -->
</div>

此时两个<p>都是<div>的直接子元素，自然都会被div > p选择器匹配到。你用<span>时不会触发这个问题，是因为<span>属于行内元素，允许被嵌套在<p>内部，浏览器不会自动闭合外层的<p>，结构和你手写的一致，孙辈元素就不会被匹配。

你可以打开浏览器开发者工具的元素面板，查看实际渲染的DOM结构验证这一点。

内容的提问来源于stack exchange，提问作者G. Stet