Question

我可以用什么XPath或CSS选择器来选择第二<div class="checkbox">？我曾尝试使用XPath //div[@class="checkbox"][2]或CSS选择器div.checkbox:nth-child(2) 关于chrome开发工具。

使用$x('//div[@class="checkbox"]')，我可以看到三个元素，我可以使用$x('//div[@class="checkbox"]')[0]指定第一个div class =复选框和$x('//div[@class="checkbox"]')[1]来指定第二个<div class="checkbox">

<div class="fs">
    <div class="f">
        <div class="checkbox">
            <input type="radio" value="A">
            <label for="A">A</label>
        </div>
    </div>
    <div class="f">
        <div class="checkbox">
            <input type="radio" value="B">
            <label for="B">B</label>
        </div>
    </div>
    <div class="f">
        <div class="checkbox">
            <input type="radio" value="C">
            <label for="C">C</label>
        </div>
    </div>
</div>

Answer 1

您需要结果中的第二个元素。这可以通过使用下面的

来完成

(//div[@class="checkbox"])[2]

我认为CSS不允许从结果中选择

Answer 2

不是试图通过索引找到第二个元素，另一种可能性是通过INPUT上的值或该DIV中包含的LABEL中的文本来获取它。一对夫妇的XPath将是

//div[@class='checkbox'][./input[@value='B']]
//div[@class='checkbox'][./label[.='B']]

Answer 3

由于JeffC和Tarun Lalwani已经建议采用XPath的方式，我想提出一种不同的方法。

在CSS中，可以使用:nth-child选择器选择第二个<div class="f">并从那里抓取嵌套的div。（>可以省略）

div.f:nth-child(2) > div.checkbox

同样，以下内容适用于XPath：

//div[@class='f'][2]/div[@class='checkbox']

一个可以使用Attribute selectors的CSS选择器基于属性值选择元素，但不幸的是，一个无法选择父级。

使用nth-type或nth-child选择n个元素

3 个答案: