我正在尝试使用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)
我并不确定你想要选择哪一个,但你应该使用:nth-*伪类来玩更多.这是一个CSS选择器,用于选择所有3个c3nth-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选择器和伪类, 这对于自己进行主动实验非常有帮助.你会搞清楚的.
| 归档时间： |
|
| 查看次数： |
5205 次 |
| 最近记录： |