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 > table > tbody > tr:eq(2),tr:eq(1)

上面的选择器字符串表示处理程序要做两件事（第一个对应逗号之前的部分，第二个点对应逗号之后的部分）：

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

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

• 数据的第三行table 因为这是div.panel-body.news 的直接子代。另一个带有顶部索引的表是不是div.panel-body.news 的直接子代，因为它被放在center 标记下。此外，无论如何它只有两行，所以第一部分匹配一个元素。
• 索引表和数据表的第二行，因为在选择器字符串中的逗号后没有应用直接子关系。因此，它匹配索引表中 N-Z 的行和数据表中的第 2 行。

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

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

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

• 只有数据表是 div.panel-body.news 的直接子表，因此逗号之前的选择器字符串将只匹配第二个数据行
• 数据表只有三行（索引表只有两行），所以逗号后面的部分只匹配第三个数据行。

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

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

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

• 只有数据表是div.panel-body.news 的直接子表，因此逗号之前的选择器字符串将只匹配第二个数据行
• 数据表只有四行（索引表只有两行），所以逗号后面的部分只匹配第四行数据。

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

你应该这样写选择器：

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