html - CSS 选择器无法正确使用逗号

Question

您能否澄清一下，我使用的 CSS 选择器是否与逗号一起工作不正确，或者是我没有完全理解它应该如何工作？

我正在尝试解析此页面的表格 http://www.citefactor.org/journal-impact-factor-list-2014_0-A.html

以下 CSS 选择器返回树元素而不是两个

div.panel-body.news > table > tbody > tr:eq(2),tr:eq(1)

您可以使用 https://try.jsoup.org/ 进行测试

Answer 1

为什么下面的选择器获取 3 个元素而不是 2 个？

div.panel-body.news > 表 > tbody > tr:eq(2),tr:eq(1)

上面的选择器字符串指示处理程序要做两件事(第一点对应于逗号之前的部分，第二点对应于逗号之后的部分):

• 使用 class='panel-body news' 查找 div 元素。在其直接子元素(>表示仅选择直接子元素而不是后代)中，查找所有table元素并然后在该列表中找到所有作为表的直接子元素的 tbody 元素。现在，在 tbody 元素集合下，选择第三个 tr(:eq(2) 部分，因为索引是从 0 开始的)。
• 选择所有第二个 tr 元素(即选择每个表格的第二行)。

在您的代码中，有两个 table 元素。第一个表是索引位于顶部的表，下一个表是包含实际数据的表。因此，以下是获取的元素:

• 数据表的第三行，因为它是div.panel-body.news的直接子级。索引位于顶部的另一个表不是 div.panel-body.news 的直接子级，因为它位于 center 标签。此外，无论如何它只有两行，因此第一部分匹配一个元素。
• 索引表和数据表的第二行，因为选择器字符串中的逗号后面不应用直接子关系。因此，它匹配索引表中N-Z的行和数据表中的第2行。

那么，为什么下面的选择器只选择 2 个元素呢？

div.panel-body.news > 表 > tbody > tr:eq(1),tr:eq(2)

上面的选择器只会选择两个元素，因为:

• 只有数据表是 div.panel-body.news 的直接子级，因此逗号之前的选择器字符串仅匹配第二个数据行
• 数据表中只有三行(索引表只有2行)，因此逗号后面的部分只匹配第三个数据行。

那么，您能解释一下下面的内容吗？

div.panel-body.news > 表 > tbody > tr:eq(1),tr:eq(3)

上面的选择器只会选择两个元素，因为:

• 只有数据表是 div.panel-body.news 的直接子级，因此逗号之前的选择器字符串仅匹配第二个数据行
• 数据表中只有四行(索引表只有2行)，因此逗号后面的部分只匹配第四个数据行。

好的，那么如果我想获取第二个和第三个数据行，正确的选择器是什么？

您应该按如下方式编写选择器:

div.panel-body.news > table > tbody > tr:eq(2),
div.panel-body.news > table > tbody > tr:eq(1)