为什么 querySelector('div span') 匹配，即使 querySelector('div') 不匹配？

Question

看来我遇到了querySelector API 的一个令人惊讶的怪癖。有人可以向我解释为什么我会得到这个结果吗？

const p = document.getElementById('parent')

// This line finds the span element
console.log(p.querySelector('div span'))

// Even though this line finds nothing
console.log(p.querySelector('div'))

<div id=parent>
  <span>test</span>
</div>

我的浏览器：Mozilla Firefox 78.4.0esr

Answer 1

console.log(p.querySelector('div'))

什么也没找到，因为

Element 接口的 querySelector() 方法返回第一个元素，该元素是调用它的元素的 后代，它与指定的选择器组匹配。 -- mdn（强调我的）

console.log(p.querySelector('div span'))

匹配因为

匹配时考虑元素的整个层次结构，包括元素集合之外的元素，包括baseElement及其后代；换句话说，选择器首先应用于整个文档，而不是 baseElement，以生成潜在元素的初始列表。然后检查生成的元素以查看它们是否是 baseElement 的后代。这些剩余元素的第一个匹配由 querySelector() 方法返回。 -- mdn（强调我的）：

感谢evolutionxbox 和G-Cyrillus 的cmets。