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

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

当选择器与一个空格（ 后代组合器） 组合在一起时 ，它称为后代选择器。 所以

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

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

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

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

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

Answer 2

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