標題重寫為：是否存在「前一個兄弟選擇器」？

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。

請參閱來自Selectors Level 3的相鄰兄弟選擇器和來自Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification的5.7 相鄰兄弟選擇器。