如何在CSS中选中slide-active元素及其之后的第二个marg类元素

首先先看你给出的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类的元素，以及它之后的第二个带marg类的元素，可以用以下CSS选择器组合：

/* 同时选中两个目标元素 */
.slide-active,
.slide-active + .marg + .marg {
  /* 示例样式：添加黄色背景高亮 */
  background-color: #ffd700;
}

下面拆解一下这两个选择器的作用：

• .slide-active：这个很直接，就是匹配所有带有slide-active类的元素，也就是你HTML里的第一个div（内容为1的那个）。
• .slide-active + .marg + .marg：这里用到了相邻兄弟选择器（+），它只会匹配紧挨着前一个元素的兄弟元素。第一个+ .marg选中slide-active元素紧挨着的下一个带marg类的元素（内容为2的div），第二个+ .marg再选中这个元素紧挨着的下一个带marg类的元素——也就是你要找的“slide-active之后的第二个marg元素”（内容为3的div）。

如果后续你的HTML结构可能出现非marg类的元素插在目标元素中间，那可以换用更灵活的写法：

.slide-active,
.slide-active ~ .marg:nth-of-type(2) {
  /* 自定义样式 */
}

这里的~是通用兄弟选择器，会匹配slide-active之后所有带marg类的兄弟元素，再用:nth-of-type(2)筛选出其中的第二个。不过就你当前给出的结构来说，第一种相邻兄弟选择器的写法更精准，性能也更优。

内容的提问来源于stack exchange，提问作者Abilash Erikson