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

Question

我正在构建一个使用 CSS 选择器或 XPath 字符串的基于 selenium 的测试应用程序，并尝试测试悬停时出现的菜单项。通过右键单击在 Chrome 和 FireFox 中使用“检查元素”，可以验证正确的 html 是否被突出显示，但是当我复制 CSS 选择器或 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-indexed，不像 :nth-child() 是 1-indexed，因此这将返回与选择器 #myId > li:nth-child(2) > a 匹配的第九个元素。

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

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

---

但是，您的情况是独一无二的，因为如果我们假设 #myId 是唯一的，那么您可以使用 CSS 伪类 :nth-of-type() 找到第二个 @ 的第九个 a 子级987654331@子元素#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() 选择器兼容。这就是为什么我相信它可以用于您的特定情况。