是否有“前一个兄弟”选择器？

Question

加号 ( + ) 用于选择下一个兄弟。

是否有前一个兄弟姐妹的等价物？

原文由 Jourkey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不，没有“前一个兄弟”选择器。

在相关说明中， ~ 用于一般后继兄弟（意味着该元素在此之后，但不一定紧随其后）并且是 CSS3 选择器。 + 用于下一个兄弟，是 CSS2.1。

请参阅 选择器级别 3 中的 相邻兄弟组合 器和 5.7 级联样式表级别 2 修订版 1 (CSS 2.1) 规范 中的相邻兄弟选择器。

原文由 cletus 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我找到了一种方法来设置所有以前的兄弟姐妹（与 ~ 相对）的样式，这可能会根据您的需要起作用。

假设您有一个链接列表，当鼠标悬停在一个链接上时，所有之前的链接都应该变成红色。你可以这样做：

 /* 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>

原文由 mantish 发布，翻译遵循 CC BY-SA 3.0 许可协议