Question

为了给我的问题一些背景，我有12个兄弟div，每个div代表一年中的一个月。可以在给定时间选择这些div中的0,1或2。选中后，有一类＆＃34;活跃＆＃34;适用于该div。当选择了两个div时，我想将样式应用于所选的两个div之间的所有div。

例如

＆＃13;

<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>

＆＃13;

因此，在上面的代码片段中，我想将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;
}

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

但是，如果您想要更清晰的解决方案，我建议您使用JS并将.active类添加到您要定位的所有元素中。

如果您正在使用jQuery，则只需使用.nextUntil() method：

即可

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

＆＃13;

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

＆＃13;

.month.active {
  color: #f00;
}

＆＃13;

<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>

＆＃13;

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;}

Answer 3

由于CSS的级联性质，.active之前的元素无法从.active's引用中有效定位。我在.prev之前向元素添加了.active类，然后在将+引用到后面的元素时使用了相邻的兄弟选择器.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>

Answer 4

使用此 CSS 仅针对两个 .active 之间的兄弟姐妹，而不必为第二个 background-color: initial; 之后的兄弟姐妹指明 .active。

请注意，如果只有一个同级具有 .active 类，则其后的所有同级都将匹配。

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

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

有没有办法在两个兄弟姐妹之间应用CSS样式？

4 个答案: