CSS选择器错误排查：精准定位指定嵌套span元素

问题场景 #

给定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&amp;d=identicon&amp;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>

尝试用选择器div.user-details span:nth-child(-n+2)定位目标元素，返回了9个结果（BeautifulSoup测试输出）：

from bs4 import BeautifulSoup

soup = BeautifulSoup(html, 'html.parser')
result = 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>]

问题原因 #

原选择器的核心问题：

1. 未使用直接子元素选择器（>），会匹配div.user-details下所有层级的<span>，而非限定范围。
2. :nth-child(-n+2)的作用是匹配每个父元素下的前2个子元素中的<span>，因此嵌套在.-flair里的所有符合条件的子<span>都会被选中，导致结果数量远超预期。

修正方案 #

根据你的预期输出，目标是选中div.user-details的直接子元素<span.user-location>，以及div.-flair的第一个直接子元素<span.reputation-score>，对应的CSS选择器为：

div.user-details > span.user-location, div.user-details > .-flair > span.reputation-score

若你想按“父元素下的位置”筛选（而非依赖类名），可使用：

div.user-details > span:nth-child(2), div.user-details > .-flair > span:nth-child(1)

补充说明 #

如果你的表述存在偏差，实际需求是仅选中div.user-details的直接子元素中的<span>，那么直接子元素里仅有1个符合条件的元素，选择器为：

div.user-details > span

内容的提问来源于stack exchange，提问作者VERBOSE