5

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

4

1 回答 1

10

我不确定你想选择哪一个，但你应该更多地使用 :nth-* 伪类。这是一个选择所有 3 个 c3 的 CSS 选择器nth-child()

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 选择器和伪类， 这对您自己积极地进行实验非常有帮助。你会弄清楚的。

于 2013-11-11T15:17:58.927 回答