Question

我不理解该代码的控制台输出，尤其是因为CSS代码针对的是正确的元素，而不是querySelector函数。

let firstChild = document.querySelector('BODY > :first-child');
console.log(firstChild.querySelector(':first-child > :first-child'));
console.log(firstChild.querySelector(':first-child'));

BODY > :first-child > :first-child > :first-child  {
  color: red;
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div class="D1">
      <div class="D2">
        <div>A</div>
        <div>B</div>
      </div>
    </div>
  </body>
</html>

Answer 1

foo.querySelector与选择器匹配的foo中的第一个元素匹配。

此：

let firstChild = document.querySelector('BODY > :first-child');

匹配<div class="D1">

然后：

firstChild.querySelector(':first-child > :first-child')

匹配<div class="D2">是因为：

<div class="D2">在firstChild内
<div class="D1">与:first-child匹配（它是body的第一个孩子）
<div class="D2">与:first-child匹配（它是D1的第一个孩子）

firstChild.querySelector(':first-child')

…给出类似的结果，它只是不在乎上面的第二个条件。

简而言之，您会得到不同的结果，因为querySelector 不会向选择器本身添加隐式的“ foo的后代”，也不要求每个元素都匹配是foo的后代（只有最后一个元素需要与之匹配）。

CSS选择器和querySelector函数之间的结果差异

1 个答案: