加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
当前回答
没有“前一选择器”,但可以使用:not和~(“后选择器”)的组合。没有逆序,没有javascript。
.父级a{颜色:蓝色}.父项a.活动{颜色:红色}.parent a:不是(.parent a.active~a){颜色:红色}<div class=“parent”><a href=“”>链接</a><a href=“”>链接</a><a href=“”class=“active”>链接</a><a href=“”>链接</a><a href=“”>链接</a></div>
我认为我的方法比“设置所有div的样式,而不是删除div之后的样式”,或者使用javascript,或者使用相反的顺序更直接。
其他回答
不,没有“上一个同级”选择器。
在一个相关的注释中,~表示一般继承兄弟(意味着元素在这个之后,但不一定紧接着),并且是一个CSS3选择器。+用于下一个兄弟姐妹,为CSS2.1。
请参阅选择器级别3中的相邻同级组合符和级联样式表级别2修订版1(CSS 2.1)规范中的5.7相邻同级选择器。
没有“前一选择器”,但可以使用:not和~(“后选择器”)的组合。没有逆序,没有javascript。
.父级a{颜色:蓝色}.父项a.活动{颜色:红色}.parent a:不是(.parent a.active~a){颜色:红色}<div class=“parent”><a href=“”>链接</a><a href=“”>链接</a><a href=“”class=“active”>链接</a><a href=“”>链接</a><a href=“”>链接</a></div>
我认为我的方法比“设置所有div的样式,而不是删除div之后的样式”,或者使用javascript,或者使用相反的顺序更直接。
我找到了最简单的解决方案。它可能只适用于你正在做的事情。
假设您想将鼠标悬停在“sibling_2”上以更改以下示例中的“sibling_1”:
<div class='parent'><div class='sibling_1'></div><div class='sibling_2'></div></div>
由于没有以前的元素选择器,您可以简单地切换“sibling_1”和“sibling_2”并应用,使它们看起来相同。
.父级{显示:柔性;弯曲方向:行反转;}
现在您可以这样选择它们。.sibling_1:悬停~.sibling_2{#您的CSS}
选择器级别4建议:has()(以前是主题指示符!),有一天,它将允许您选择前一个兄弟姐妹:
previous:has(+ next) {}
或(对于一般上一个兄弟姐妹而不是相邻兄弟姐妹):
previous:has(~ next) {}
在撰写本文时:has{}被大多数但不是所有主要浏览器支持。支持正在改善。
多年来,这个答案吸引了数十条“仍然不支持”的评论(现已删除)。请不要再添加了。答案中有一个指向定期更新的浏览器支持图表的链接。
虽然没有以前的CSS选择器。我找到了一个快速而简单的方法来自己选择一个。以下是HTML标记:
<div class="parent">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
在JavaScript中,只需执行以下操作:
document.querySelector(".child-2").parentElement.querySelector(".child-1")
这将首先选择父div,然后从child-2 div中选择child-1 div。
如果您使用jQuery,只需执行以下操作:
$(".child-2").prev()