使用querySelector查找后代元素返回意外的结果

Question

所以我最近一直在使用querySelector，并在尝试选择后代元素时发现了一些非常奇怪的行为。

以下面的标记为例：

<div id="parent">
  <div id="foo">
    <div id="bar"></div>
  </div>
</div>

如果我想从#parent元素的上下文中查询这个DOM树，我可以执行以下操作：

var parent = document.getElementById('parent');
parent.querySelector('div')

这将按预期返回#foo元素。现在，如果我想通过仅引用标记名称来获取#bar元素，我可以执行以下任一操作：

var parent = document.getElementById('parent');
parent.querySelector('div div')
parent.querySelector('div > div')

相反，两个选择器字符串都返回#foo元素，而不是#bar元素？但是，将上下文元素（#parent）更改为跨度可以解决问题吗？似乎上下文元素影响它如何解释选择器字符串。或者，jQuery的选择器引擎按预期执行。

我创建了一个说明问题的CodePen。

我不认为这是一个错误，因为结果在多个浏览器中都是一致的（我使用的是Chrome 37）。我想我的问题是;我错过了什么吗？这是规范的一部分吗？有没有人对这种行为有解释？

任何见解都将不胜感激，谢谢， 莱恩

Answer 1

Per the docs，＆＃34;选择器是针对元素所在的整个DOM树的上下文中的给定元素进行评估的。＆＃34;

也就是说，它不是jQuery风格的＆＃34;从这里开始找到与选择器路径匹配的元素＆＃34;。

根据规范从DOM树级别查看时，

#parent #foo绝对匹配div div和div > div。

它＆＃34;工作＆＃34;当您将#parent更改为span，因为#parent #foo不再与div div匹配，而#foo #bar是新的第一个匹配。