CSS nth-child 选择器可以在除 X 之外的任何地方工作

Question

我刚刚发现了一些非常奇怪的事情。这是关于这个CSS选择器的

div:nth-child(3) a

在 X 上，我在 DevTools 中选择了一个容器 div

现在，使用 css 选择器

div:nth-child(3) a

我想找到包含

4h

文本

的链接

我从 X 复制了 HTML 以生成演示这里。您可以看到它按预期工作，我看到了正确的 href 值！

虽然这听起来超级简单，但事实确实如此。简化后的 HTML 如下所示：

    <div>
        <div><a href="/elonmusk">@elonmusk<a/></div>
        <div>·</div>
        <div>
           <a href="/status/234324234234234">3h</div>
        </div>
    </div>

但是，当我尝试在 X.com 上重现此内容时，它不起作用

要重现，首先选择容器元素

现在，如果我执行该查询，我会得到

它选择第一个

div

。当我如下查询时可以修复它

$0.querySelector('div:nth-child(3)').querySelector('a')

为什么它在我的演示中有效，但在 X 上无效？

Answer 1

那是因为您的选择器不要求

<a>

成为直接后代，并且在 X 上，您的

<a>

元素是另一个祖先

<div>

的后代，这也是其父级的第三个子级。

同样的情况可以用下面的树重现：

const parent = document.querySelector("parent");
const target = document.querySelector("div:nth-child(3) a");

console.log(target);

<section>
  <div></div>
  <div></div>
  <div class="grand-parent">
    <div><a>another a</a></div>
    <div></div>
    <div class="parent">
      <a>target</a>
    </div>
  </div>
</section>

您可能想要

"div:nth-child(3) > a"

：

const parent = document.querySelector("parent");
const target = document.querySelector("div:nth-child(3) > a");

console.log(target);

<section>
  <div></div>
  <div></div>
  <div class="grand-parent">
    <div><a>another a</a></div>
    <div></div>
    <div class="parent">
      <a>target</a>
    </div>
  </div>
</section>

Answer 2

您查看的 HTML 子树是

<div> $0
  <div>
    <a> $1
      <div>
        <span>...</span>
      </div>
    </a>
  </div>
  <div>
    <span>·</span>
  </div>
  <div> $2
    <a> $3
      <time>...</time>
    </a>
  </div>
</div>

现在

$0.querySelectorAll("div:nth-child(3) a")

选择所有

a

元素

• 是

  $0

  和
的后代
• 有一个祖先

  div

  ，是其兄弟姐妹中的第三个。该祖先可以位于您正在查看的子树之外！

此查询的结果包含

$3

（以

$2

作为祖先）和

$1

（以该子树之外的祖先）。

并且

$0.querySelector("div:nth-child(3) a")

仅返回其中第一个，即

$1

。

您想要的正确表达为

$0.querySelector("div:nth-child(3)").querySelector("a")

。