querySelectorAll和:第一个孩子

Question

我正在尝试使用querySelectorAll获取一个wikipedia表中每行的第一个链接的列表,但我不确定为什么: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>

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>