是否有一个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）选择none。

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

Answer 1

只需将目标更改为指向新的<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 { ... }

但是，这确实假设所有divider元素都在同一个父元素下。