Question

我正在尝试使用By.cssSelector来获取类c3的第n个dom元素，结构如下：

<div class="c1">
    <div class="c2">
        <div class="c3">...</div>
    </div>
</div>
<div class="c1">
    <div class="c2">
        <div class="c3">...</div>
    </div>
</div>
<div class="c1">
    <div class="c2">
        <div class="c3">...</div>
    </div>
</div>

测试我的CSS选择器，我变得越来越困惑。此选择器正确选择第二个c2 / c3实例：

.c1:nth-of-type(2)

，同时：

.c2:nth-of-type(2)
.c3:nth-of-type(2)

什么也不做。

更糟糕的是，将其翻译成硒，我似乎始终没有找到所有3个版本的内容。有很多选择这些元素的替代方法（我可能只是做XPATH），但我对nth-of-type缺乏理解让我发疯。任何人都可以提供有关为什么第二个2不起作用或纠正我对这个选择器的基本缺乏理解的见解吗？

编辑：这是在Chrome（29/30）和Firefox（24/25）

Answer 1

我并不确定哪个你想要选择一个，但你应该使用：nth- *伪类来玩更多。这是一个CSS选择器，使用nth-child()

选择所有3个c3

div.c1 div.c3:nth-child(1)

就像我说的那样，你还没有真正指定你想选择哪一个。

但是我对nth-of-type缺乏了解让我发疯。任何人都可以提供有关为什么第二个2不起作用或纠正我对这个选择器的基本缺乏理解的见解吗？

要记住的一件事是，所有:nth-*()伪类都依赖于他们的父母。让我翻译您的选择器：

.c1:nth-of-type(2)

查找第二个孩子的c1类。

在您的情况下，<body>很可能是父母，所以......

<body>
  <div .c1 />
  <div .c1 /> // it highlights this one, because it's the 2nd child of the type ".c1"
  <div .c1 />
</body>

现在让我解释为什么你的其他选择器不起作用。

.c2:nth-of-type(2)和.c3:nth-of-type(2)都在查看父级。因为您正在指定父级，所以它期望<body>作为父级。在您的情况下，<body>不是父... <div .c1 />。实际上，该选择器正在寻找DOM -

<body>
  <div .c1 />
  <div .c2 /> // this **would** be the second nth-of-type, but it's not really this way. 
  <div .c1 />
</body>

在http://cssdesk.com处使用不同的css选择器和伪类，对自己进行主动实验非常有帮助。你会明白的。

在硒中选择Nth-type

1 个答案: