Titel umgeschrieben als: Gibt es einen „Vorheriger-Geschwister-Selektor'?

Question

Der Plus-Selektor (+) wählt das nächste benachbarte Geschwisterelement aus.

Gibt es einen gleichwertigen Selektor zum Auswählen des vorherigen Geschwisters?

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 相邻兄弟选择器。