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

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

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

虽然没有以前的CSS选择器。我找到了一个快速而简单的方法来自己选择一个。以下是HTML标记：

<div class="parent">
    <div class="child-1"></div>
    <div class="child-2"></div>
</div>

在JavaScript中，只需执行以下操作：

document.querySelector(".child-2").parentElement.querySelector(".child-1")

这将首先选择父div，然后从child-2 div中选择child-1 div。

如果您使用jQuery，只需执行以下操作：

$(".child-2").prev()

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

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

不，没有“上一个同级”选择器。

在一个相关的注释中，~表示一般继承兄弟（意味着元素在这个之后，但不一定紧接着），并且是一个CSS3选择器。+用于下一个兄弟姐妹，为CSS2.1。

请参阅选择器级别3中的相邻同级组合符和级联样式表级别2修订版1（CSS 2.1）规范中的5.7相邻同级选择器。

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

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