用于遍历具有特定属性的行的 CSS 选择器或 xpath答案

【问题标题】：A CSS selector or xpath to iterate over rows with specific attributes用于遍历具有特定属性的行的 CSS 选择器或 xpath
【发布时间】：2015-05-27 06:16:54
【问题描述】：

想象给我一张这样的桌子：

<table>
  <tr><td>A</td></tr>
  <tr><td><a href="#">B</a></td></tr>
  <tr><td><a href="#">C</a></td></tr>
  <tr><td>D</td></tr>
  <tr><td><a href="#">E</a></td></tr>
  <tr><td>B</td></tr>
</table>

我想构建一个 CSS 选择器（首选）或一个 XPath（接受）来挑选包含 a 锚点的第 n 行，这样：

selector(1) => <a href="#">B</a>
selector(2) => <a href="#">C</a>
selector(3) => <a href="#">E</a>

CSS 选择器

在这一点上，我很确定 CSS 不会完成这项工作，但是

'table tr:nth-child(' + n + ')'

将选择第 n 行，但无论它们是否具有 a 锚点，都会选择行。同样，

'table tr:nth-child(' + n + ') a'

将选择带有 a 锚点的行，但前提是 n 为 2、3 或 5。

XPath

使用 XPath，这匹配所有具有 a 的 tr

`//table//tr//a/ancestor::tr`

但我不知道如何选择第 n 个匹配项。特别是，

`//table//tr//a/ancestor::tr[position() = 2]`

似乎没有选择任何东西。

【问题讨论】：

标签： html xpath css-selectors

【解决方案1】：

您不能使用 CSS 选择器¹ 这样做，原因有很多：

您的 XPath 不正确，因为 a/ancestor::tr[position() = 2] 返回 a 元素的第二个 tr 祖先。也就是说，[position() = 2] 谓词连接到ancestor:: 轴。此 XPath 将匹配以下 HTML 中的中间级别 tr：

<table>
  <tr><td><table>
    <tr><td><table>
      <tr><td><a href="#"></a>
    </table>
  </table>
</table>

在您的 HTML 中，每个 a 元素只有一个 tr 祖先，所以这不会选择任何东西。

您应该使用的 XPath 是：

(//table//tr[descendant::a])[2]

这匹配包含a 后代的第二个tr 元素。

¹_{在选择器 4 中，一个潜在的解决方案是 table tr:nth-match(2 of :has(a))。}

【讨论】：

宾果游戏。解释也很好。严格来说我想真正的答案是(//table//tr[descendant::a])[2]//a 来挑选a 元素。

【解决方案2】：

如果我理解正确，您可以找到第 n 个 td，它有一个 <a href，就像这样（您希望 C 成为第二个匹配项？）：

(/table//tr/td[a[@href]])[2]

如果你不能保证一个 td 元素，你可以通配路径和元素：

(/table//tr//*[a[@href]])[2]

【讨论】：

啊！这也有效。我以前不知道您可以在 XPath 中使用括号——本质上——操作符优先级。这种方法感觉比使用后代更直接::
我想要指出的一件事是// is short for /descendant-or-self::node()。 :)

【解决方案3】：

@BoltClock 和@StuartLC 的答案都有效。但是现在我知道 XPath 中的括号可以控制运算符的优先级，一个更直接的解决方案似乎是：

(//table//tr//a)[2]

我错过了什么吗？

【讨论】：