html - 用于迭代具有特定属性的行的 CSS 选择器或 xpath

Question

假设我有一张这样的表:

<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 anchor 的第 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 anchor ，都会选择行。同样，

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

将挑选出带有 a anchor 的行，但前提是 n 为 2、3 或 5。

XPath

对于 XPath，这匹配所有具有 a

的 tr

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

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

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

似乎没有选择任何东西。

Answer 1

由于多种原因，您不能使用 CSS 选择器¹ 执行此操作:

• There is no parent selector 和
• There is no selector for matching the nth child satisfying an arbitrary selector.

您的 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 元素相匹配。

---

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