html - 如何通过pup从下一行选择值？

Question

给出下表:

<table>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
    <td>Buzz</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

假设我不知道值的固定位置，我想通过给出第一行列名称来选择第二行，例如:

• Foo => 1
• 酒吧 => 2
• 嗡嗡声 => 3

---

目前我知道如何获取列的名称(第一行):

$ pup -f table.html 'td:contains("Foo") text{}'
Foo

我知道如何通过以下方式返回下一列:

$ pup -f table.html 'td:contains("Foo") + td text{}'
Bar

我希望通过以下方式获得下一行:

$ pup -f table.html 'td:contains("Foo") + tr text{}'

但它不会返回任何内容(我希望返回1)。

这里是the solution with jQuery ，但我希望该解决方案能够与 pup 命令一起使用。

我检查过Mozilla's CSS selector docs page ，但我找不到合适的东西。

Answer 1

您的选择器

td:contains("Foo") + tr text{}

表示直接跟在 td 之后的 tr 文本，作为同级。根据表结构，tr 不是 td 的 sibling - 它们是它们的 parent 。

pup 有自己的 :parent-of() 伪类，列出 here ，但这不足以满足您的需求，因为您无法在与您所在列相同的列中选择下一行的 td 。 Selectors 4 的列组合器 || 完全符合您的要求，但它没有在任何地方实现，当然也没有在 pup 中实现。使用任何主要与 CSS 选择器配合使用的命令行工具来完成此操作都不是一件容易的事。