加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
当前回答
不,没有“上一个同级”选择器。
在一个相关的注释中,~表示一般继承兄弟(意味着元素在这个之后,但不一定紧接着),并且是一个CSS3选择器。+用于下一个兄弟姐妹,为CSS2.1。
请参阅选择器级别3中的相邻同级组合符和级联样式表级别2修订版1(CSS 2.1)规范中的5.7相邻同级选择器。
其他回答
虽然没有以前的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()
我的要求是在@Quentin的回答帮助下选择当前悬停的项目的前两个兄弟姐妹,我选择了前两个姐妹。
.儿童{宽度:25px;高度:25px;}.child:悬停{背景:蓝色;}.child:has(+.child:悬停){背景:黄色;}.child:has(+.child+.child:悬停){背景:绿色;}.child:悬停+.child{背景:红色;}.child:悬停+.child+.child{背景:洋红色;}<ul class=“parent”><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li></ul>
选择所有以前的同级
.儿童{宽度:25px;高度:25px;}.child:悬停{背景:蓝色;}.child:has(~.child:悬停){背景:红色;}<ul class=“parent”><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li></ul>
没有这样的选择器,但在DOM API中有一个非常只读的属性
Node.previousSibling节点
在悬停时覆盖下一个同级的样式,这样看起来只有前一个同级在悬停时添加了样式。
ul力{颜色:红色;}ul:悬停li{颜色:蓝色;}ul:悬停li:悬停~li{颜色:红色;}<ul><li>项目1</li><li>项目2</li><li>项目3</li></ul>
没有“前一选择器”,但可以使用: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,或者使用相反的顺序更直接。