CSS / SCSS 中 class 的下一个兄弟姐妹

Question

我有一个包含以下内容的小列表 classes

<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> 的 class 更改为蓝色背景，但我只想将其更改为第一个 "first--blue" 而不是其他

Answer 1

你可以用.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>

Answer 2

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

CSS / SCSS 中 class 的下一个兄弟姐妹

Next sibling with class in CSS / SCSS

css

sass

less