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

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

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

根据您的确切目标，有一种方法可以在不使用父选择器的情况下实现父选择器的有用性（即使存在）。。。

假设我们有：

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

我们可以做什么来使用间距使袜子块（包括袜子颜色）在视觉上突出？

什么会很好，但不存在：

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

存在的内容：

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

这将所有锚链接设置为顶部有15px的边距，并将其重置为0，以用于LI中没有UL元素（或其他标签）的链接。

我找到了最简单的解决方案。它可能只适用于你正在做的事情。

假设您想将鼠标悬停在“sibling_2”上以更改以下示例中的“sibling_1”：

<div class='parent'><div class='sibling_1'></div><div class='sibling_2'></div></div>

由于没有以前的元素选择器，您可以简单地切换“sibling_1”和“sibling_2”并应用，使它们看起来相同。

.父级{显示：柔性；弯曲方向：行反转；}

现在您可以这样选择它们。.sibling_1：悬停~.sibling_2{#您的CSS}

没有这样的选择器，但在DOM API中有一个非常只读的属性

Node.previousSibling节点

我的要求是在@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>

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

previous:has(+ next) {}

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

previous:has(~ next) {}

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

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