CSS / SCSS中具有类的下一个兄弟[重复]答案

【问题标题】：Next sibling with class in CSS / SCSS [duplicate]CSS / SCSS中具有类的下一个兄弟[重复]
【发布时间】：2020-11-16 12:40:06
【问题描述】：

我有一个包含以下课程的小清单

<ul>
<li class="first"></li>
<li class="first"></li>
<li class="first"></li>
<li class="first"></li>
<li class="first--blue"></li>
<li class="first--blue"></li>
<li class="first--blue"></li>
<li class="first"></li>
<li class="first"></li>
</ul>

现在我想将<li class="first--blue"></li> 的类更改为蓝色背景，但我只想将其更改为第一个"first--blue" 而不是其他的

【问题讨论】：

你试过.first + .first--blue吗？
你可以给它一个 id 或另一个类。如果这三个列表项不使用相同的 CSS 设置，为什么它们需要具有相同的类？
@Geshode 列表来自 API，我无法更改类或 ID，也无法使用 JS

标签： css sass less

【解决方案1】：

您只能将第一个子属性应用到某个标签，而不能应用到一个类。 Here 详细解释了如何应用所有类然后撤消以实现前面回答的第一个子类属性。

【讨论】：

【解决方案2】：

您可以使用.first--blue ~ .first--blue 表示不是第一个的first--blue。

请记住将.first--blue 中定义的任何内容设置为.first--blue ~ .first--blue 中的初始状态。

li {
  height: 10px;
}

/* The first first--blue */
.first--blue {
  background-color: blue;
}

/* Other first--blue */
.first--blue ~ .first--blue {
  background-color: initial;
}

<ul>
  <li class="first"></li>
  <li class="first"></li>
  <li class="first"></li>
  <li class="first"></li>
  <li class="first--blue"></li>
  <li class="first--blue"></li>
  <li class="first--blue"></li>
  <li class="first"></li>
  <li class="first"></li>
</ul>

【讨论】：

成功了，谢谢:)