我解决了这个问题，将元素放在一个柔性框中，然后使用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>

没有“前一选择器”，但可以使用：not和~（“后选择器”）的组合。没有逆序，没有javascript。

.父级a{颜色：蓝色}.父项a.活动{颜色：红色}.parent a：不是（.parent a.active~a）{颜色：红色}<div class=“parent”><a href=“”>链接</a><a href=“”>链接</a><a href=“”class=“active”>链接</a><a href=“”>链接</a><a href=“”>链接</a></div>

我认为我的方法比“设置所有div的样式，而不是删除div之后的样式”，或者使用javascript，或者使用相反的顺序更直接。

可以按如下方式使用：has（）。

.thePrevious:has(+ .theNextSibling)

我使用它来修复重叠的引导模式，如下所示。如果有多个模态，则之前的模态将被隐藏。

.modal.show.modal--open:has(~ .modal.show.modal--open){
   opacity: 0;
 }

我找到了一种方法来设计所有以前的兄弟姐妹（与~相反），这取决于你需要什么。

假设你有一个链接列表，当你悬停在一个链接上时，之前的所有链接都应该变成红色。你可以这样做：

/*默认链接颜色为蓝色*/.父级a{颜色：蓝色；}/*上一个兄弟姐妹应该是红色的*/.parent:悬停{颜色：红色；}.父项a：悬停，.父a:悬停~a{颜色：蓝色；}<div class=“parent”><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a></div>

对于我的用例，需要更改焦点上的先前元素样式，并且悬停在父元素中只有两个项。为此，使用了：focuswithin和：hover伪类。

无论何时发生聚焦/悬停事件，都可以选择

.root元素：悬停.element到样式｛background color:red；｝.root元素：将焦点放在.element中，以设置样式｛background color:green；｝<div class=“root元素”>文本聚焦</span><input type=“text”placeholder=“type To Style”/></div>

/*向所有子级添加样式，然后撤消目标的样式以及你目标的兄弟姐妹*/ul>li{颜色：红色；}ul＞li目标，ul>li.target~li{颜色：继承；}＜ul＞<li>之前</li><li class=“target”>目标</li><li>之后</li><li>之后</li></ul>