爲什麼這個選擇器在Chrome的這個頁面上返回兩個元素？

非常簡單。我認爲我有什麼應該是一個獨特的選擇器，但在Chrome中它返回兩個<p>元素。我在看的頁面是：爲什麼這個選擇器在Chrome的這個頁面上返回兩個元素？

http://docs.webfaction.com/user-guide/control_panel.html

和選擇是：

document.querySelectorAll('body:nth-child(2) div#container:nth-child(1) div#content.clear.hasCorners:nth-child(2) div.document:nth-child(3) div.documentwrapper:nth-child(1) div.bodywrapper:nth-child(1) div.body:nth-child(1) div#the-control-panel.section:nth-child(1) p:nth-child(3)')

我必須誤解的東西有關nth-child選擇，因爲我認爲這是保證是唯一的。

編輯：啊，我絕對應該使用一些子選擇器（>）這裏，以避免進一步下降DOM樹。有人可以隨時回答，我會接受。

來源

2012-01-24 Bialecki

如上所述，問題是如果沒有子選擇器（>），則不能保證唯一性，因爲可能會在DOM樹下進一步存在其他匹配。例如考慮這個標記：

<body> 
    <div class="foo" id="bar"> 
    <div class="foo" id="baz"></div> 
    </div> 
</body>

，如果你嘗試過：

$('body:nth-child(1) .foo:nth-child(1)')

，將返回兩個元素。

來源

2012-01-25 20:54:30 Bialecki

面向未來讀者的筆記。一個普通的瑕疵是：'：nth-child（xxx）'沒有被正確理解。 'body：n-child（1）'選擇作爲**第一個孩子**的''元素，相對於父級（容器）。請注意，此索引是基於一個的。還要注意（重複）它不*選擇第一個''元素，而是''元素，它恰好是* first *子元素。 –

爲什麼這個選擇器在Chrome的這個頁面上返回兩個元素？

回答

相關問題