javascript - 使用 Element.querySelector 的意外结果

Question

给定以下标记(为简洁起见，我只包含了相关部分)

<ul>
  <li id="item">
    <a href="#foo">Stuff</a>
    <ul>
      <li> <a href="#foo">Foo stuff</a></li>
      <li><a href="#bar">Bar Stuff</a></li>
      <li><a href="#foobar">Foo-Bar Stuff</a></li>
    </ul>
  </li>
</ul>

假设我引用了 ID 为“item”的 li 元素，我可以这样得到:

let item = document.querySelector('#item');

现在我需要检索嵌套 ul 列表中的最后一个 anchor 元素。为此，我将使用“last-child”选择器。这是我最初尝试的:

let lastLink = item.querySelector('li:last-child > a');

我认为这可以解决问题，但可惜它实际上返回了标记中的第一个链接('Stuff')。我不太明白这一点，因为我的基本元素已经是“项目”元素，我要求它在该基本元素中找到 li 元素，该元素是其父元素的最后一个子元素，然后返回 a 元素从里面。
确实，如果我这样做:

let lastLink = item.querySelector('li:last-child');

它实际上返回嵌套 ul 列表中的最后一个 li 元素，那么为什么第一个选项不能简单地获取其中的“a”元素呢？
以下是我尝试过的其他一些有效的方法:

let lastLink = item.querySelector('#item li:last-child > a');

但是，由于我已经引用了基本元素，因此在此处指定其 ID 似乎毫无意义。这些也可以工作并返回正确的 a 元素:

let lastLink = item.querySelector('li ul li:last-child > a');
let lastLink = item.querySelector('li:last-child li:last-child > a');  

我的问题是，为什么第一个选项不起作用？感谢是否有人可以阐明原因

Answer 1

做rootElm.querySelector(selector)本质上是:

for (const node of recursiveDescendantNodes) {
  if (node.matches(selector)) {
    return node;
  }
}

selector没有分解和分析选择器的第一部分是否开始低于根节点 - 通常，指定根节点所做的只是指示要搜索的后代。
自从第一个 <a>指向 #foo匹配传递的选择器，它被返回。

console.log(
  document.querySelector('#item > a').matches('li:last-child > a')
);

<ul>
  <li id="item">
    <a href="#foo">Stuff</a>
    <ul>
      <li> <a href="#foo">Foo stuff</a></li>
      <li><a href="#bar">Bar Stuff</a></li>
      <li><a href="#foobar">Foo-Bar Stuff</a></li>
    </ul>
  </li>
</ul>

不过，有一种方法可以避免这种行为，使用 :scope - 在支持的浏览器中，表示“元素 querySelector(或 querySelectorAll )被调用”，这是您希望看到的功能。

let item = document.querySelector('#item');
let lastLink = item.querySelector(':scope li:last-child > a');
console.log(lastLink);

<ul>
  <li id="item">
    <a href="#foo">Stuff</a>
    <ul>
      <li> <a href="#foo">Foo stuff</a></li>
      <li><a href="#bar">Bar Stuff</a></li>
      <li><a href="#foobar">Foo-Bar Stuff</a></li>
    </ul>
  </li>
</ul>