为什么第一个代码有效而第二个代码无效？

Question

当我将div.main作为单独的条件时，代码不起作用

<div class="user-panel main"> 
    <input type="text" name="login"> 
</div>




 document.querySelector("div.user-panel.main input[name='login']").style.backgroundColor = "red"; // this code works
 document.querySelector("div.user-panel  div.main input[name='login']").style.backgroundColor = "red"; // this code doesn't work

Answer 1

当选择器与空格-descendant combinator组合时，它称为后代选择器。所以

document.querySelector("div.user-panel  div.main input[name='login']")

正在input[name='login']内的div.main内寻找div.user-panel。

由于在您的html中，它只是一个具有2个类的div，因此此选择器无法找到任何内容。

但是，如果您的html看起来像这样，它将起作用：

<div class="user-panel">
    <div class="main">
        <input type="text" name="login"> 
    </div>
</div>

Answer 2

查询选择器中的空格表示一个元素在另一个元素内部。第二行正在寻找df['relative_positions']中包含的input[name='login']，它包含在另一个div（div.main）中。