时间戳

首页 > 解决方案 > CSS选择器和querySelector函数的结果区别

javascript - CSS选择器和querySelector函数的结果区别

问题描述

我不理解这段代码的控制台输出，特别是因为 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>

标签： javascripthtmlcss

解决方案

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（只有最终元素需要匹配）的后代。

推荐阅读