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

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

当您的选择器与 space - descendant combinator 组合时 - 它被称为后代选择器。所以

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

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

因为在您的 html 中只有一个 div 和 2 类，所以这个选择器找不到任何东西。

但是，如果您的 html 看起来像这样：

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

Answer 2

查询选择器中的 space 表示一个元素在另一个元素中。第二行是查找 div.main 中包含的 input[name='login']，它包含在另一个 div (div.user-panel).

中

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

why does the first code work and the second doesn't work?

javascript

dom

jsdom