「前一個兄弟元素選擇器」是否存在？

Question

加號選擇器 ( ) 用來選擇下一個相鄰的兄弟元素。

是否有一個等效的選擇器用於選擇前一個兄弟元素？

Answer 1

我找到了一種方法來為所有前面的兄弟元素（與~相反）添加樣式，具體取決於您的需求。

假設您有一個連結列表，當懸停在其中一個連結上時，所有前面的連結都應該變成紅色。您可以這樣做：

/* 默认链接颜色为蓝色 */
.parent a {
  color: blue;
}

/* 前面的兄弟元素应该是红色的 */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}

<div class="parent">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
</div>

Answer 2

不，沒有「previous sibling」選擇器。

在相關的註解中，~是用於一般的後續兄弟選擇器（意思是元素在此元素之後，但不一定緊接著之後），它是CSS3選擇器。 是用於下一個兄弟選擇器，它是CSS2.1。

請參閱來自選擇器等級3的相鄰兄弟選擇器和層疊樣式表2.1版修訂1（CSS 2.1）規格的相鄰兄弟組合器。