选择放置在另一个元素之后但不是立即放置的第一个元素

Question

如何在另一个元素（例如 h1）之后只选择第一个元素（例如 h2），但不一定要紧跟在之后？
因此，元素+元素（例如 h1 + h2）不起作用，因为它选择放置在元素之后立即的元素

<h1> Title1 </h1>
..... <--! many tags but h2 -->
<h2> h2 Title2 selected </h2>
..... <--! many tags but h1 and h2-->
<h2> h2 Title3 not selected </h2>

Answer 1

现在可以使用一个选择器：

h1:first-of-type ~ h2:not(h1:first-of-type ~ h2 ~ h2) {
  color:red;
}

<div>
  <h2>h2 Title3 not selected </h2>
  <h1> Title1 </h1>
  <p>text</p>
  <h2> h2 Title2 selected </h2>
  <h3>text</h3>
  <h2> h2 Title3 not selected </h2>
</div>

---

旧答案

我认为你不能用一个选择器来实现这一点，所以你可以试试下面的方法：

h1:first-of-type ~ h2 {
  color:red;
}
h1:first-of-type ~ h2 ~ h2 {
  color:initial; /*we reset the style for the others*/
}

<div>
  <h2>h2 Title3 not selected </h2>
  <h1> Title1 </h1>
  <p>text</p>
  <h2> h2 Title2 selected </h2>
  <h3>text</h3>
  <h2> h2 Title3 not selected </h2>
</div>