有沒有「前一個兄弟」選擇器？

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

不，沒有「前一個兄弟選擇器」。

相關的是，~ 是用於一般的後繼兄弟選擇器（意味著元素在此元素之後，但不一定緊跟著），是一個CSS3選擇器。 是用於下一個兄弟選擇器，是CSS2.1。

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