选择器级别4建议：has（）（以前是主题指示符！），有一天，它将允许您选择前一个兄弟姐妹：

previous:has(+ next) {}

或（对于一般上一个兄弟姐妹而不是相邻兄弟姐妹）：

previous:has(~ next) {}

在撰写本文时：has｛｝被大多数但不是所有主要浏览器支持。支持正在改善。

多年来，这个答案吸引了数十条“仍然不支持”的评论（现已删除）。请不要再添加了。答案中有一个指向定期更新的浏览器支持图表的链接。

在悬停时覆盖下一个同级的样式，这样看起来只有前一个同级在悬停时添加了样式。

ul力{颜色：红色；}ul：悬停li{颜色：蓝色；}ul：悬停li：悬停~li{颜色：红色；}＜ul＞<li>项目1</li><li>项目2</li><li>项目3</li></ul>

没有，也有。

如果必须在输入之前放置标签，只需在输入之后放置标签，并将标签和输入保持在一个div中，并按如下方式设置div的样式：

.输入框{显示：柔性；弯曲方向：列反转；}<div class=“input box”><输入id=“电子邮件”class=“表单项”/><label for=“email”class=“表单项标题”>电子邮件*</label></div>

现在，您可以应用css中提供的标准下一个同级样式选项，并且它看起来就像您使用的是上一个同级的样式。

我解决了这个问题，将元素放在一个柔性框中，然后使用flex direction:column reverse。

然后，我不得不手动反转HTML中的元素（以相反的顺序排列），这看起来很正常，而且很有效！

<div style="display: flex; flex-direction: column-reverse">
  <a class="element2">Element 2</a>
  <a class="element1">Element 1</a>
</div>
...
<style>
  .element2:hover + element1 {
    ...
  }
</style>

我遇到了一个类似的问题，发现所有这类问题都可以通过以下方式解决：

给你的所有物品一种风格。为所选项目指定样式。使用+或~为下一项指定样式。

这样，您就可以设置当前项、先前项（所有项都被当前项和下一项覆盖）以及下一项的样式。

例子：

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

希望这对某人有所帮助。

我的要求是在@Quentin的回答帮助下选择当前悬停的项目的前两个兄弟姐妹，我选择了前两个姐妹。

.儿童{宽度：25px；高度：25px；}.child:悬停{背景：蓝色；}.child:has（+.child:悬停）{背景：黄色；}.child:has（+.child+.child:悬停）{背景：绿色；}.child:悬停+.child{背景：红色；}.child:悬停+.child+.child{背景：洋红色；}<ul class=“parent”><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li></ul>

选择所有以前的同级

.儿童{宽度：25px；高度：25px；}.child:悬停{背景：蓝色；}.child:has（~.child:悬停）{背景：红色；}<ul class=“parent”><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li></ul>