Javascript 如何根据元素的祖父母的子值从列表中选择元素 这就是我试图选择的对象：$x'//div[contains@class，react-select\uu value-container]' **其中有10个** 这是祖父母对象：$x'//div[@class=chart option]/label[.=Layer]/..'**其中只有一个** 父对象是一个简单的//div[contains@class，选择]

代码如下所示：

<div class="chart-option">
   <label>Layer</label>
   <div class="react-select css-2b097c-container">
      <div class="react-select__value-container css-1hwfws3">

所以我需要一个值容器，它的祖父母拥有子/标签[.=Layer]

但是我不能用我的一生来获得正确的顺序和相关的语法。这方面有好的教程吗？非常感谢您的帮助。

请尝试以下xpath：

//div[@class="chart-option"][label="Layer"]/div[div[contains(@class,"react-select__value-container")]]

解释 查看文档中的任意位置，选择div tags，这样1类是图表选项，2有一个名为label with the value Layer的子标记

查看上面结果集中的每个节点，选择所有子div标记，这样子div标记本身就有一个与给定的类模式匹配的div标记。换句话说，根据孙子的类进行匹配，但最终选择子div标记

测试用例 下面是我使用的更多测试用例。您可以使用在线xpath测试工具进行测试

<div>
    <div class="chart-option">
        <label>nope</label>
        <div class="react-select css-WRONG-container">
            <div class="react-select__value-container css-WRONG">
            </div>
        </div>
    </div>
    <div class="chart-option">
        <label>Layer</label>
        <div class="react-select css-CORRECT-container">
            <div class="react-select__value-container css-CORRECT">
            </div>
        </div>
    </div>
    <div class="chart-option">
        <label>Not Layer</label>
        <div class="react-select css-WRONG-container">
            <div class="react-select__value-container css-WRONG">
            </div>
        </div>
    </div>
    <label>Layer</label>
    <div class="react-select css-WRONG-container">
        <div class="react-select__value-container css-WRONG">
        </div>
    </div>
    <div class="chart-option">
        <label>Layer</label>
        <div class="WRONG-AGAIN">
            <div class="WRONG-AGAIN">
            </div>
        </div>
    </div>
</div>

---

结束标记在示例代码中的位置在哪里？我所看到的按层次选择xpath的最佳解释！如果可以的话，我会+10。谢谢

/div[div[contains(@class,"react-select__value-container")]]

<div>
    <div class="chart-option">
        <label>nope</label>
        <div class="react-select css-WRONG-container">
            <div class="react-select__value-container css-WRONG">
            </div>
        </div>
    </div>
    <div class="chart-option">
        <label>Layer</label>
        <div class="react-select css-CORRECT-container">
            <div class="react-select__value-container css-CORRECT">
            </div>
        </div>
    </div>
    <div class="chart-option">
        <label>Not Layer</label>
        <div class="react-select css-WRONG-container">
            <div class="react-select__value-container css-WRONG">
            </div>
        </div>
    </div>
    <label>Layer</label>
    <div class="react-select css-WRONG-container">
        <div class="react-select__value-container css-WRONG">
        </div>
    </div>
    <div class="chart-option">
        <label>Layer</label>
        <div class="WRONG-AGAIN">
            <div class="WRONG-AGAIN">
            </div>
        </div>
    </div>
</div>