querySelectorAll 和 :first 孩子

Question

我正在尝试使用 querySelectorAll 获取一个维基百科表中每行仅第一个链接的列表，但我不确定为什么 :first-child 选择器不起作用。我知道还有其他方法可以做到这一点，但我想知道 querySelectorAll 函数是否可以解决这个特定问题。

在 html 下方查看我的尝试：

 <table class='wikitable'>
  <tr>
    <td>
      <a href="" title="">John doe</a>
    </td>
    <td>
      <a href="" title="">other link</a>
    </td>
    </tr>

  <tr>
    <td>
      <a href="" title="">Mary Jane</a>
    </td>
    <td>
      <a href="" title="">another link</a>
    </td>
  </tr>
</table>

我的代码：

 let list = document.querySelectorAll(('.wikitable tr:first-child td:first-child a'));

前面的代码只是返回一个包含一个元素的节点：

 <a href="" title="">John doe</a>

而是一个列表：

 <a href="" title="">John doe</a>
<a href="" title="">Mary Jane</a>

原文由 notforever 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正确的选择器应该是

".wikitable tr td:first-child a"

tr:first-child 意思 _是_“ tr 第一个孩子”。这只适用于

<tr>
  <td>
    <a href="" title="">John doe</a>
  </td>
  <td>
    <a href="" title="">other link</a>
  </td>
</tr>

原文由 Sebastian Simon 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

In '.wikitable tr:first-child td:first-child a' , tr:first-child will select only tr elements that are a first child (ie it only selects the first tr ).

'.wikitable tr td:first-child a' 将转到“.wikitable”表中的每一行并选择任何 a 第一个单元格中的锚点（大概只有一个，但技术上可以有更多）。

原文由 Harris 发布，翻译遵循 CC BY-SA 3.0 许可协议