JavaScript querySelector访问嵌套子元素异常：为何两种写法结果不同？

我在使用JavaScript的querySelector方法访问嵌套子元素时遇到问题，目标是获取选中元素的第一个子元素的第一个子元素。

我尝试了以下代码：

let selected = document.querySelector(".main-box")
var desiredElement = selected.querySelector("div:nth-child(1) > div:nth-child(1)");

但该代码的结果似乎与以下代码一致：

var desiredElement = selected.querySelector("div:nth-child(1)");

看起来选择器的第二部分（> div:nth-child(1)）未按预期工作。

我的HTML结构如下：

<div class="main-box">
    <div>
        <div>Target Element</div>
        <div></div>
        <div></div>
    </div>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div>
         <div></div>
         <div></div>
         <div></div>
    </div>
</div>

然而使用以下代码时却能正常工作：

var desiredElement = document.querySelector(".main-box > div:nth-child(1) > div:nth-child(1)")

请问为何前一种写法无法正常工作？

核心问题在于**querySelector的选择器匹配范围**：
当你在selected（即.main-box元素）上调用querySelector("div:nth-child(1) > div:nth-child(1)")时，选择器中的div:nth-child(1)会匹配所有后代中符合条件的div——包括selected元素本身（如果它是其父元素的第一个子div的话）。此时整个选择器会解析为：找到selected元素（因为它是父元素的第一个子div），然后选择它的第一个子div，最终返回的是.main-box的直接子div，而非你要的深层目标元素。

而直接使用document.querySelector(".main-box > div:nth-child(1) > div:nth-child(1)")时，选择器通过>明确限定了从.main-box的直接子元素开始查找，不会匹配.main-box本身，因此能正确定位到目标元素。

解决方法 #

要在已选中的元素上正确使用嵌套选择器，需要明确限定选择器从当前元素的直接子元素开始，有两种方式：

1. 使用:scope伪类（代表调用querySelector的元素本身）：

var desiredElement = selected.querySelector(":scope > div:nth-child(1) > div:nth-child(1)");

2. 直接以>开头，省略:scope（现代浏览器已支持这种写法）：

var desiredElement = selected.querySelector("> div:nth-child(1) > div:nth-child(1)");

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