css - 是否有一个 CSS 选择器来定位整个页面中给定类型的第 n 个元素？

Question

我有基于 Selenium 的测试，可以验证包含多个 H2 部分的页面。这些部分曾经属于同一个父级，因此使用 CSS 选择器很容易断言预期的文本（我使用 FluentAutomation API）：

I.Expect.Text("Section Title").In("h2:nth-of-type(2)")

现在页面设计已经改变，所以 H2 部分被放置在不同的 DIV 下，所以如果它们的父级，它们现在都是第一个子级。现在选择器 h2:nth-of-type(1) 选择所有 H2 部分，而 h2:nth-of-type(2) 选择无。

在选择 H2 部分时，我不想依赖 DIV 的结构。我想要实现的是在整个页面中选择 H2 类型的第 n 个元素。我知道这很容易使用 jQuery，但是这可能使用 CSS 语法吗？

score 3 · Accepted Answer

只需将目标更改为指向您的新<div>元素：

div:nth-of-type(1) h2 { ... }
div:nth-of-type(2) h2 { ... }

这显然取决于页面上有多少分隔元素。如果您使用的分隔符不仅仅是为了包含<h2>元素，您总是可以给它们一个新的类：

<div class="h2-container">
    <h2>Hello, world!</h2>
</div>

div.h2-container:nth-of-type(1) h2 { ... }
div.h2-container:nth-of-type(2) h2 { ... }

但是，这确实假设您的所有分隔符元素都在同一个父级下。

1 回答 1