Question

我正在构建一个基于selenium的测试应用程序使用CSS选择器或XPath字符串，并且我正在尝试测试悬停时出现的菜单项。使用＆＃34;检查元素＆＃34;在Chrome和FireFox中通过右键单击，可以验证是否正在突出显示正确的html，但是当我复制CSS Selector或XPath时，它有时会选择多个元素。例如：

"#myId > li:nth-child(2) > a"

是Chrome给我的，但它代表了DOM中的13个元素（每个元素都在不同的子菜单中）。我需要的选择器是选择器的第九个元素：

$("#myId > li:nth-child(2) > a")[9]

我的主要问题是这是否可以表示为CSS选择器？我搜索了一个例子，但没有找到这个特殊的问题。

$("#myId > li:nth-child(2) > a(9)")

不起作用 - 返回空数组。

Answer 1

CSS没有为匹配某个复杂选择器的第n个元素提供选择器。 jQuery使用:eq() selector：

来弥补这一点

$("#myId > li:nth-child(2) > a:eq(8)")

请注意，:eq()是0索引的，与1-indexed的:nth-child()不同，因此这将返回与选择器#myId > li:nth-child(2) > a匹配的第9个元素。

等效的XPath，如果您选择使用它，则为：

(id('myId')/li[2]/a)[9]

但是，您的情况是独一无二的，因为如果我们假设#myId是唯一的，那么您可以使用CSS伪类:nth-of-type()来查找第九个a元素li的第二个#myId子项的子项：

$("#myId > li:nth-child(2) > a:nth-of-type(9)")

请注意，:nth-of-type()和:eq()不一样。 :nth-of-type()的行为与:nth-child()非常相似，因为它会考虑同一父项的子项，但它会查看元素类型或标记名称。在这种情况下，我们关注的元素类型是a。

在现有选择器中使用>组合器意味着您的li和a元素之间存在父子关系，这与:nth-of-type()选择器兼容。这就是为什么我相信它可以用于您的特定情况。

如何创建包含索引的CSS选择器元素

1 个答案: