如何用XPath精准选取Pokémon赛事下的后续同级div元素

问题分析 #

你当前的XPath会选中Pokémon赛事标题行之后所有inply-coupon-row元素，包括后续其他赛事的内容，原因是没有限制选取范围到下一个赛事标题行之前。核心需求是：只选取Pokémon标题行之后、下一个赛事标题行之前的inply-coupon-row元素，无论Pokémon赛事在什么位置。

正确XPath代码 #

//div[@class='inply-coupon-row' and not(@class='inply-competition-header-row')][preceding-sibling::div[@class='inply-coupon-row inply-competition-header-row'][1]/.//div/span[2]='Pokémon']

逻辑拆解 #

1. 基础筛选：先定位所有纯inply-coupon-row元素（排除带inply-competition-header-row的标题行）：
   //div[@class='inply-coupon-row' and not(@class='inply-competition-header-row')]
2. 范围限制：通过preceding-sibling::div[@class='inply-coupon-row inply-competition-header-row'][1]获取当前元素最近的前一个赛事标题行，然后判断该标题行的子元素div/span[2]文本为Pokémon。
   • 这样，Pokémon标题行之后的元素，只要它们的最近上一个标题行是Pokémon的，就会被选中
   • 当遇到下一个赛事标题行时，后续元素的最近上一个标题行变成新赛事的，自然会被排除

验证场景 #

假设页面结构如下：

<!-- 其他赛事标题 -->
<div class="inply-coupon-row inply-competition-header-row">
  <div><span>1</span><span>Football</span></div>
</div>
<div class="inply-coupon-row">Football Item 1</div>

<!-- Pokémon赛事标题 -->
<div class="inply-coupon-row inply-competition-header-row">
  <div><span>2</span><span>Pokémon</span></div>
</div>
<div class="inply-coupon-row">Pokémon Item 1</div>
<div class="inply-coupon-row">Pokémon Item 2</div>

<!-- 后续赛事标题 -->
<div class="inply-coupon-row inply-competition-header-row">
  <div><span>3</span><span>Basketball</span></div>
</div>
<div class="inply-coupon-row">Basketball Item 1</div>

使用上述XPath会精准选中Pokémon Item 1和Pokémon Item 2，不会包含Basketball Item 1；如果Pokémon是最后一项赛事，它之后的所有inply-coupon-row元素也会被正确选中。

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