第一个匹配元素的 CSS 选择器

Question

<section class="section-one"></section>
<section class="section-two"></section>
<nav></nav>
<section class="section-three"></section>
<section class="section-four"></section>

因为部分顺序来自 CMS，部分顺序是未知的(即，section-two 和 section-three 可以交换)。我想选择 section-two 之后的第一个同级部分，但不能使用相邻的同级选择器，因为部分之间可能还有其他元素。

考虑到它们之间可能有一个或多个元素，我如何选择 section-two 之后的第一部分？

Answer 1

.section-two ~ section {
  /* Set styles */
}
.section-two ~ section ~ section {
  /* Undo styles */
}

.section-two ~ section {
  background: #0f0;
}
.section-two ~ section ~ section {
  background: transparent;
}

<section class="section-one">One</section>
<section class="section-two">Two</section>
<nav>Nav</nav>
<section class="section-three">Three</section>
<section class="section-four">Four</section>