在css中选择第二个最近的div类

Question

请参阅以下HTML

<div class="slick-track">
  <div class="marg first slide-active">1</div>
  <div class="marg second">2</div>
  <div class="marg third">3</div>
  <div class="marg fourth">4</div>
  <div class="marg fifth">5</div>
  <div class="marg sixth">6</div>
  <div class="marg seventh">7</div>
</div>      

在这里,我想在幻灯片激活后选择幻灯片活动和第二个marg类.我怎么选择这个？

例如:

如果slide-active要.first上课,那么我必须选择.third.

如果slide-active 有.second,那么我必须选择.fourth.

Answer 1

您可以使用兄弟选择器来选择它.

.slide-active + .marg + .marg

片段在活动时突出显示所选的片段.

.slide-active + .marg + .marg {background: #ccf;}

<div class="slick-track">
  <div class="marg first slide-active">1</div>
  <div class="marg second">2</div>
  <div class="marg third">3</div>
  <div class="marg fourth">4</div>
  <div class="marg fifth">5</div>
  <div class="marg sixth">6</div>
  <div class="marg seventh">7</div>
</div>

当班级在另一个班级时:

.slide-active + .marg + .marg {background: #ccf;}

<div class="slick-track">
  <div class="marg first">1</div>
  <div class="marg second slide-active">2</div>
  <div class="marg third">3</div>
  <div class="marg fourth">4</div>
  <div class="marg fifth">5</div>
  <div class="marg sixth">6</div>
  <div class="marg seventh">7</div>
</div>

注意:当您在最后一张或最后一张幻灯片时,这将不起作用.