我找到了一種方法來塑造所有以前的兄弟姐妹（相反~），這取決于你需要什么。

假設您有一個鏈接列表，當懸停在一個鏈接上時，所有以前的鏈接都應該變為紅色。你可以這樣做：

/* default link color is blue */

.parent a {

  color: blue;

}

/* prev siblings should be red */

.parent:hover a {

  color: red;

}

.parent a:hover,

.parent a:hover ~ a {

  color: blue;

}

<div class="parent">

  <a href="#">link</a>

  <a href="#">link</a>

  <a href="#">link</a>

  <a href="#">link</a>

  <a href="#">link</a>

</div>

選擇器級別4引入:has()（以前是主題指示符!），這將允許您選擇以前的兄弟：

previous:has(+ next) {}

...但在撰寫本文時，瀏覽器支持已超出前沿。

考慮orderflex和網格布局的屬性。

我將在下面的示例中關注flexbox，但相同的概念適用于Grid。

使用flexbox，可以模擬先前的兄弟選擇器。

特別是，flex order屬性可以在屏幕周圍移動元素。

這是一個例子：

當元素B懸停時，您希望元素A變為紅色。

<ul>
    <li>A</li>
    <li>B</li></ul>

腳步

1. 制作ul一個flex容器。
   
   

   ul { display: flex; }

1. 在標記中反轉兄弟姐妹的順序。
   
   

   <ul>
      <li>B</li>
      <li>A</li></ul>

1. 使用兄弟選擇器來定位元素A（~或+將執行）。
   
   

   li:hover + li { background-color: red; }

1. 使用flex order屬性可以恢復可視顯示中兄弟節點的順序。
   
   

   li:last-child { order: -1; }

......瞧！先前的兄弟選擇器誕生（或至少模擬）。

這是完整的代碼：

ul {

    display: flex;

}

li:hover + li {

    background-color: red;

}

li:last-child {

    order: -1;

}

/* non-essential decorative styles */

li {

    height: 200px;

    width: 200px;

    background-color: aqua;

    margin: 5px;

    list-style-type: none;

    cursor: pointer;

}

<ul>

    <li>B</li>

    <li>A</li>

</ul>