小编Vik*_*Raj的帖子

我在 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)")

那么为什么这段代码不起作用

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