使用 XPATH 定位嵌套的 HTML 数据属性答案

【问题标题】：Target a nested HTML data attribute with XPATH使用 XPATH 定位嵌套的 HTML 数据属性
【发布时间】：2018-01-06 23:36:05
【问题描述】：

我正在努力使用 XPATH 定位某些特定的 HTML...

使用 CSS，我知道正确的定位是：

html > body > div.page-content > div.container > div.myaccount > div > div:nth-child(4) > ul > [data-coin="BTC"] > div > div:nth-孩子(2)

HTML 是：

<html lang="en">
   <body style="">
      <div class="page-content">
         <div class="container" style="padding-top:10px;padding-bottom:50px">
            <div class="myaccount">
               <div class="row">
                  <div class="col-md-12">
                     <ul class="listgroup">
                        <li class="hidden-xs hidden-sm list-group-item tradeitem" data-coin="BTC" data-coindisplay="BTC">
                           <div class="row marketrow">
                              <div class="col-sm-2"><img src="/public/img/coinmd/bitcoin.png?v=68" style="height:37px"> &nbsp;Bitcoin</div>
                              <div class="col-sm-2">$23329.28</div>
                              <div class="col-sm-2">$23329.28</div>
                              <div class="col-sm-2">$370,105,221,964</div>
                              <div class="col-sm-1"><span class="moveup">14.76%</span></div>
                              <div class="col-sm-3">
                                 <a href="/buy/btc" class="btn btn-default btn-sm">Buy BTC</a>&nbsp;&nbsp;
                                 <a href="/sell/btc" class="btn btn-default btn-sm">Sell BTC</a>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

我尝试过的 XPATH 是：

//*[包含（concat（“”，@class，“”），concat（“”，“col-sm-2”，“”））]

^ 这可行，但太通用了，因为 HTML 元素的位置每天都会改变。它也没有考虑祖父母 HTML 的 data 属性。

所以我的问题是我需要什么 XPATH，专门针对 this 元素（就像我可以使用 CSS 一样）？

&lt;div class="col-sm-2"&gt;$23329.28&lt;/div&gt;

【问题讨论】：

好的，我现在已经删除了图片和上传的 HTML，你可以删除 downvote 吗？欢呼和感谢
这个 Html 中没有 div:nth-child(4)。您要选择哪个标签？
@derloopkat - 我现在刚刚更新了我的问题，使用了我要选择的元素（就在我的问题末尾）。谢谢
$23329.28 的第一个 div 是 //*[@data-coin='BTC']/div/div[2]。但是你不需要这样做。只需在 FF、Opera 或 Chrome 中打开 de 页面，右键单击元素 -> 检查 -> 复制 Xpath，即可得到/html/body/div/div/div/div/div/ul/li/div/div[2]
感谢@derloopkat！那非常非常接近。我唯一的问题是它返回 2 个结果，因为如果您查看 HTML，它是重复的（不幸的是我无法更改它）。有没有办法只抓住第一个副本？非常感谢

标签： html css xpath

【解决方案1】：

感谢那些为这篇文章做出贡献的人。我发现的答案是：
//*[@data-coin='BTC']/div/div[2])[1]

【讨论】：