使用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

每the docs，「選擇器是針對在整個DOM樹，其中所述元件位於的上下文中，給定的元素進行評價。」

也就是說，它不是一個jQuery風格的「找到一個匹配從這裏開始的選擇器路徑的元素」。

#parent #foo絕對匹配div div和div > div，當從DOM樹級別查看時，根據規範。

它「作品」當你改變#parent到span因爲#parent #foo不再匹配div div，並#foo #bar是新的第一場比賽。