有没有一种方法可以在两个兄弟元素之间应用CSS样式？

Question

为了给我的问题提供一些背景，我有12个兄弟div，每个div代表一年中的一个月。在任何时候，可以选择0、1或2个这些div。选择时，会将“active”类应用于该div。当选择两个div时，我想将样式应用于两个选定div之间的所有div。

例如：

<div class="month">Jan</div>
<div class="month active">Feb</div>
<div class="month">Mar</div>
<div class="month">Apr</div>
<div class="month">May</div>
<div class="month">Jun</div>
<div class="month active">Jul</div>
<div class="month">Aug</div>
<div class="month">Sep</div>
<div class="month">Oct</div>
<div class="month">Nov</div>
<div class="month">Dec</div>

在上面的代码片段中，我想为活动月份以及所有中间月份应用CSS样式。在CSS中是否可能实现这一点，还是最好使用JS？

编辑：

这个方法不起作用，但我认为它可能是正确的方向。

.month.active ~ .month {
    background-color: $color-lighter-text;
    color: #fff;
}

.month.active:nth-child(2) ~ .month {
    background-color: #fff !important;
    color: $color-muted-text !important;
}

- Nicholas Haley

---

我会使用jQuery来完成这个任务。首先，选择所有带有“month”类的元素，找到其中处于激活状态的元素，然后使用each循环，为每个元素添加类，直到达到下一个激活元素。 - I am Cavic

Answer 1

你可以选择第一个 .active 元素后面的所有 .month 元素，然后通过选择跟随第二个 .active 元素后面的所有 .month 元素来覆盖该样式：

.month.active ~ .month,
.active {
  color: #f00;
}
.month.active ~ .month.active ~ .month {
  color: initial;
}

<div class="month">Jan</div>
<div class="month active">Feb</div>
<div class="month">Mar</div>
<div class="month">Apr</div>
<div class="month">May</div>
<div class="month">Jun</div>
<div class="month active">Jul</div>
<div class="month">Aug</div>
<div class="month">Sep</div>
<div class="month">Oct</div>
<div class="month">Nov</div>
<div class="month">Dec</div>

然而，如果你想要更干净的解决方案，我建议使用JS并将.active类添加到您想要定位的所有元素上。

如果您在使用jQuery，可以简单地使用.nextUntil()方法：

$('.month.active:first').nextUntil('.active').addClass('active');

$('.month.active:first').nextUntil('.active').addClass('active');

.month.active {
  color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="month">Jan</div>
<div class="month active">Feb</div>
<div class="month">Mar</div>
<div class="month">Apr</div>
<div class="month">May</div>
<div class="month">Jun</div>
<div class="month active">Jul</div>
<div class="month">Aug</div>
<div class="month">Sep</div>
<div class="month">Oct</div>
<div class="month">Nov</div>
<div class="month">Dec</div>

- Josh Crozier

Answer 2

您需要使用通用兄弟选择器：~。

<div class="month">Jan</div>
<div class="month active">Feb</div>
<div class="month">Mar</div>
<div class="month">Apr</div>
<div class="month">May</div>
<div class="month">Jun</div>
<div class="month active">Jul</div>
<div class="month">Aug</div>
<div class="month">Sep</div>
<div class="month">Oct</div>
<div class="month">Nov</div>
<div class="month">Dec</div>

.month {background: red;}
.month.active {background: blue;}
.month.active ~ .month {background: blue;}
.month.active ~ .month.active ~ .month {background: red;}

- aaronburrows

Answer 3

因为CSS的级联性质，.active之前的元素无法从.active的引用中有效地定位。我在.active之前的元素上添加了一个.prev类，然后在引用.active到它之后的元素时使用了相邻兄弟选择器+。

对不起，我的错，你想要中间的月份，可以使用更普遍的~。更新以反映OP的请求，但可能与之前的某些解决方案相同，抱歉:-\

.month.active { 
  background-color: orange;
  }
.month.active ~ .month {
  background-color: orange;
}
.month.active ~ .month.active ~ .month {
  background-color: white;
}

<div class="month">Jan</div>
<div class="month active">Feb</div>
<div class="month">Mar</div>
<div class="month">Apr</div>
<div class="month">May</div>
<div class="month">Jun</div>
<div class="month active">Jul</div>
<div class="month">Aug</div>
<div class="month">Sep</div>
<div class="month">Oct</div>
<div class="month">Nov</div>
<div class="month">Dec</div>

- zer00ne

Answer 4

使用此CSS仅针对两个.active之间的兄弟元素进行目标定位，而无需为第二个.active后面的兄弟元素指定background-color: initial;。

请注意，如果只有一个兄弟元素具有.active类，则该元素后面的所有兄弟元素都将匹配。

.month.active, 
.month.active ~ .month:not(.month.active ~ .month.active ~ .month) { 
  background-color: orange;
}

https://codepen.io/xmorelll/pen/wvdmbYq

- Xavier Morell Llorens