<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
之后的第一部分?
最佳答案
.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>
关于第一个匹配元素的 CSS 选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39396825/