為什么第一個代碼有效而第二個代碼無效？

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 ）中。