Question

非常简单。我认为我应该是一个独特的选择器，但在Chrome中它会返回两个<p>元素。我正在查看的页面是：

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树走下去。有人可以随意回答，我会接受。

Answer 1

如上所述，问题是如果没有子选择器（>），则无法保证唯一性，因为DOM树下可能还有其他匹配项。例如，考虑这个标记：

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

如果你尝试过：

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

会返回两个元素。

为什么此选择器会在Chrome中返回此页面上的两个元素？

1 个答案: