是否有 “以前的兄弟”CSS 选择器？

加号（ + ）用于下一个兄弟。以前的兄弟姐妹是否有同等效力？

css css-selectors

不，没有 “以前的兄弟” 选择器。

在一个相关的注释中， ~是一般继承兄弟（意思是元素在此之后，但不一定紧接在之后）并且是 CSS3 选择器。 +代表下一个兄弟，是 CSS2.1。

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

我找到了一种方法，可以根据你的需要设置所有以前的兄弟姐妹（与~相反）。

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

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

选择器级别 4 介绍:has() （以前是主题指示器! ），它允许您选择以前的兄弟：

previous:has(+ next) {}

... 但在撰写本文时，浏览器支持已超出前沿。

协慌网

是否有 “以前的兄弟”CSS 选择器？

答案