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

roll = nearest

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用[class^="section-"]，因此请选择以＆＃34; .section - ＆＃34;开头的任何课程。我使用nth-last-of-type(2)从最后倒数2并选择正确的元素，但没有nth-last-of-type(2)你得到.section-two之后的每个.section-NUMBER

＆＃13;

section {
  display: inline-block;
  margin: 5px;
  width: 50px;
  height: 50px;
  background-color: gray;  
}
nav {
  display: inline-block;
  width: 100%;
  height: 10px;
  background-color: gray;
}
.section-two ~ [class^="section-"]:nth-last-of-type(2) {
  background-color: blue;
}

＆＃13;

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

＆＃13;

Answer 3

如果您使用的是jquery $（＆＃34; .section-two~section＆＃34;）。css（/ *做任何* /）;

Answer 4

我不知道你是否可以通过css选择器实现这一点，它们在遍历dom方面有点受限。

作为示例，您可以使用jQuery遍历来执行：

$('.section-two').nextAll('section').first()

这将选择.section-two之后的第一部分，请检查此

希望它有所帮助。干杯！

编辑：好的，似乎您可以通过设置样式然后撤消它来选择距离兄弟，如@Oriol所示。我将这个答案作为如何使用jquery解决它的参考，以供将来参考。

＆＃13;

$('.section-two').nextAll('section').first().css('color', 'red')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="section-one">1</section>
<section class="section-two">2</section>
<nav></nav>
<section class="section-three">3</section>
<section class="section-four">4</section>

＆＃13;

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

4 个答案: