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

这里我想在幻灯片活动后选择幻灯片活动和第二个边缘类。我怎么选择这个？

例如：

如果slide-active上有.first，那么我必须选择.third。

如果slide-active附带.second，那么我必须选择.fourth。

Answer 1

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

.slide-active + .marg + .marg

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当班级在另一个班级时：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

  

注意：当您在最后一张或最后一张幻灯片时，这不起作用。