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

Question

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

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

是 Chrome 给我的，但它代表了 DOM 中的 13 个元素(每个元素都在不同的子菜单中)。我需要的选择器是选择器结果的第9个元素:

$("#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 开始索引的，与 :nth-child() 是从 1 开始索引的不同，因此这将返回匹配的第 9 个元素选择器 #myId > li:nth-child(2) > a。

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

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

---

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

$("#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() 选择器。这就是为什么我相信它可以用于您的特定情况。