选择selenium的第N个类型

一尘不染

选择selenium的第N个类型

selenium

我正在尝试使用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)

什么都不选。

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

编辑：这已经在Chrome（29/30）和Firefox（24/25）中

阅读 364

2020-06-26

共1个答案

一尘不染

我不确定要选择哪一个，但是您应该使用：nth- *伪类来做更多的事情。这是一个CSS选择器，它选择使用所有3个c3nth-child()

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

就像我说的，您尚未真正指定要选择的那个。

但是我对第n种类型的了解不足使我发疯。谁能提供关于第二个为什么不起作用的见解，或者纠正我对选择器的基本理解不足？

要记住的一件事是，所有: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选择器和伪类，主动进行自己的实验非常有帮助。您会发现的。

2020-06-26