使用 XPath 选择具有最高 z-index 值的项目

Question

需要使用具有最高 z-index 值的选择器

<div style="position: fixed;width: 400px;height: 278px;overflow: hidden;box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;bottom: 0px;transition: transform 2s ease 0s;right: 120px;z-index: 2;" class="Cl"><iframe id="t1dxvk58p7cu" name="t1dxvk58p7cu" class="Xyqxtc" allow="camera" style="height: 100%; width: 100%; background: transparent; overflow: hidden; border: none;"></iframe></div>
<div style="position: fixed;width: 400px;height: 278px;overflow: hidden;box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;bottom: 0px;transition: transform 2s ease 0s;right: 120px;z-index: 3;" class="Cl"><iframe id="t1dxvk58p7cu" name="t1dxvk58p7cu" class="Xyqxtc" allow="camera" style="height: 100%; width: 100%; background: transparent; overflow: hidden; border: none;"></iframe></div>
<div style="position: fixed;width: 400px;height: 278px;overflow: hidden;box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;bottom: 0px;transition: transform 2s ease 0s;right: 120px;z-index: 4;" class="Cl"><iframe id="t1dxvk58p7cu" name="t1dxvk58p7cu" class="Xyqxtc" allow="camera" style="height: 100%; width: 100%; background: transparent; overflow: hidden; border: none;"></iframe></div>

我在下面尝试但失败了

//div[@class='Cl'][substring-after(@style,'z-index:') > substring-after(../div[@class='Cl']/@style,'z-index:')]

Answer 1

这是一个使用正则表达式 replace 和 max 的 XPath 2.0 解决方案

//div[@class='Cl' and replace(@style,'^.*?z-index: (\d+).*?$','$1') = max(../div[@class='Cl']/replace(@style,'^.*?z-index: (\d+).*?$','$1'))]

主要思想是

• 使用替换从样式属性中提取 z-index
• 并将其与相似元素的最大 z-index 进行比较：div[id = max(../div/id)]
  （id 等于提取的 z-index）

Live Demo

这是另一个遵循架构div/[not(..div/id > id)]：

//div[@class='Cl' and not(../div[@class='Cl']/replace(@style,'^.*?z-index: (\d+).*?$','$1') > replace(@style,'^.*?z-index: (\d+).*?$','$1'))]

参考资料：

• XPath to get the element with the highest ID（见answer）
• Regex - Extract a substring from a given string（见this和this答案）