我的输入是html：
<div class="grid--item user-info user-hover">
<div class="user-gravatar48">
<a href="/users/22656/jon-skeet">
<div class="gravatar-wrapper-48"><img src="https://www.gravatar.com/avatar/6d8ebb117e8d83d74ea95fbdd0f87e13?s=96&d=identicon&r=PG" alt="Jon Skeet's user avatar" width="48" height="48" class="bar-sm"></div>
</a>
</div>
<div class="user-details">
<a href="/users/22656/jon-skeet">Jon Skeet</a>
<span class="user-location">Reading, United Kingdom</span>
<div class="-flair">
<span class="reputation-score" title="reputation score 1,440,518" dir="ltr">1.4m</span><span title="873 gold badges" aria-hidden="true"><span class="badge1"></span><span class="badgecount">873</span></span><span class="v-visible-sr">873 gold badges</span><span title="9172 silver badges" aria-hidden="true"><span class="badge2"></span><span class="badgecount">9172</span></span><span class="v-visible-sr">9172 silver badges</span><span title="9224 bronze badges" aria-hidden="true"><span class="badge3"></span><span class="badgecount">9224</span></span><span class="v-visible-sr">9224 bronze badges</span>
</div>
</div>
<div class="user-tags">
<a href="/questions/tagged/c%23">c#</a>, <a href="/questions/tagged/java">java</a>, <a href="/questions/tagged/.net">.net</a>
</div>
</div>字符串
我感兴趣的是前两个span元素，它们是div和class="user-details"的直接后代。
为此，我使用了一个css选择器，但这个选择器返回9个结果，而不是只有两个：https://try.jsoup.org/~orgt_meWno3AxzO0GzxMBldEhIk
我尝试了一个Python实现，但同样的问题：
from bs4 import BeautifulSoup
soup = BeautifulSoup(html, 'html.parser')
soup.select('div.user-details span:nth-child(-n+2)')
# [<span class="user-location">Reading, United Kingdom</span>,
# <span class="reputation-score" dir="ltr" title="reputation score 1,440,518">1.4m</span>,
# <span aria-hidden="true" title="873 gold badges"><span class="badge1"></span><span class="badgecount">873</span></span>,
# <span class="badge1"></span>,
# <span class="badgecount">873</span>,
# <span class="badge2"></span>,
# <span class="badgecount">9172</span>,
# <span class="badge3"></span>,
# <span class="badgecount">9224</span>]型
我的预期输出如下：
# [<span class="user-location">Reading, United Kingdom</span>,
# <span class="reputation-score" dir="ltr" title="reputation score 1,440,518">1.4m</span>]型
你们能告诉我我的css选择器有什么问题吗？怎么修复？
我的问题更多的是关于css选择器，而不是找到一个替代的解决方案。
1条答案
按热度按时间lztngnrs1#
让我们看看你的HTML。我已经重新格式化了它，所以我们可以看到相关部分的结构：
字符串
您说您希望以
div.user-details的前两个span后代为目标，即span.user-location和span.reputation-score（您还没有说为什么要这样做，这将是有用的背景信息）。您尝试使用的选择器是
div.user-details span:nth-child(-n+2)。选择器的第一部分没有问题：div.user-details span返回div.user-details的所有span后代（编号为14）。通过添加:nth-child(-n+2)，您将过滤结果，以仅包括那些是其父级 * 的第一个或第二个 * 子级 * 的span（数字为9）。你实际上想做的是过滤结果，只包括那些是div.user-details* 的第一个或第二个 * 后代的span，但是没有:nth-descendant()伪类允许你这样做。使用你拥有的结构，我不明白你为什么要这么做。你只需要发明一种不同的方法来定位你想要的元素，难道你不能使用它们的类名吗？
型
我的另一个评论是，在
flair元素中有很多span。你可以通过使用一些列表元素来改进语义。这可能会使你更容易定位你想要定位的元素。