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

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.checkbox
• 我可以使用$x('//div[@class="checkbox"]')[1] 指定第二个div.checkbox

这是我的 HTML 结构示例

<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

与其尝试通过索引查找第二个元素，另一种可能性是通过 INPUT 上的值或包含在该 DIV 中的 LABEL 中的文本来获取它。几个 XPath 将是

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

Answer 2

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

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

我认为 CSS 不允许从结果中选择这样的东西

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选择器根据属性值选择一个元素，但不幸的是，一个不能选择父元素。