是否有'前一个兄弟”选择器?
P粉111627787
P粉111627787 2023-08-23 14:02:00
0
2
491
<p>加号选择器 (<code>+</code>) 用于选择下一个相邻的同级。</p> <p>上一个兄弟姐妹有等效的吗?</p>
P粉111627787
P粉111627787

全部回复(2)
P粉098979048

我找到了一种方法来设计所有以前的同级(与 ~ 相反)的样式,该方法可能会根据您的需要而起作用。

假设您有一个链接列表,当鼠标悬停在其中一个链接上时,之前的所有链接都应变为红色。你可以这样做:

/* 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>
P粉044526217

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

与此相关的是,~ 用于一般后继同级元素(意味着该元素位于该元素之后,但不一定紧随其后),并且是一个 CSS3 选择器。 + 代表下一个兄弟,是 CSS2.1。

参见 相邻同级组合器 "http://www.w3.org/TR/css3-selectors/" rel="noreferrer">选择器级别 3 和 5.7 相邻同级选择器 来自 层叠样式表 2 级修订版 1 (CSS 2.1) 规范

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板