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)

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

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

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

• 数据table的第三行，因为它是div.panel-body.news的直接子项。索引位于顶部的另一个表格是{strong> 不是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的直接子项，因此逗号前的选择器字符串只匹配第二个数据行
• 数据表中只有三行（索引表只有2行），因此逗号后面的部分只匹配第三行数据。

那么，你能解释一下吗？

div.panel-body.news > table > 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)