加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
当前回答
选择器级别4建议:has()(以前是主题指示符!),有一天,它将允许您选择前一个兄弟姐妹:
previous:has(+ next) {}
或(对于一般上一个兄弟姐妹而不是相邻兄弟姐妹):
previous:has(~ next) {}
在撰写本文时:has{}被大多数但不是所有主要浏览器支持。支持正在改善。
多年来,这个答案吸引了数十条“仍然不支持”的评论(现已删除)。请不要再添加了。答案中有一个指向定期更新的浏览器支持图表的链接。
其他回答
我找到了一种方法来设计所有以前的兄弟姐妹(与~相反),这取决于你需要什么。
假设你有一个链接列表,当你悬停在一个链接上时,之前的所有链接都应该变成红色。你可以这样做:
/*默认链接颜色为蓝色*/.父级a{颜色:蓝色;}/*上一个兄弟姐妹应该是红色的*/.parent:悬停{颜色:红色;}.父项a:悬停,.父a:悬停~a{颜色:蓝色;}<div class=“parent”><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a></div>
+是给下一个兄弟姐妹的。是否有与前一个相同的兄弟姐妹
您可以使用两个斧头选择器:!和
传统CSS中有两个后续的同级选择器:
+是紧接其后的同级选择器~是任何后续的同级选择器
在传统的CSS中,没有以前的同级选择器。
然而,在axe CSS后处理器库中,有两个先前的同级选择器:
? 是前一个同级选择器(与+相反)! 是之前的任何同级选择器(与~相反)
工作示例:
在以下示例中:
.any后续:hover~div选择任何后续div立即后续:hover+div选择立即后续div.任何以前的:悬停!div选择之前的任何div.上一个:悬停?div选择上一个div
第二部分{显示:内联块;宽度:60px;高度:100px;颜色:rgb(255、255、255);背景色:rgb(255,0,0);文本对齐:居中;垂直对齐:顶部;光标:指针;不透明度:0;过渡:不透明度0.6s缓和;}代码{显示:块;边距:4px;字体大小:24px;线条高度:24px;背景色:rgba(0、0、0和0.5);}div:第n个类型(-n+4){背景色:rgb(0,0,255);}div:第n种类型(n+3):第n个类型(-n+6){不透明度:1;}.any后续:hover~div,.紧随其后:hover+div,.任何以前的:悬停!div中,.上一个:悬停?第二部分{不透明度:1;}<h2>将鼠标悬停在下面的任何块上</h2><div></div><div></div><div class=“immediate previor”>悬停<code></代码>选择器</div><div class=“any previous”>悬停<code></代码>选择器</div><div class=“any后续”>悬停<code>~</code>选择器</div><div class=“immediate后续”>悬停<code>+</code>选择器</div><div></div><div></div><script src=“https://rouninmedia.github.io/axe/axe.js“></script>
/*向所有子级添加样式,然后撤消目标的样式以及你目标的兄弟姐妹*/ul>li{颜色:红色;}ul>li目标,ul>li.target~li{颜色:继承;}<ul><li>之前</li><li class=“target”>目标</li><li>之后</li><li>之后</li></ul>
可以按如下方式使用:has()。
.thePrevious:has(+ .theNextSibling)
我使用它来修复重叠的引导模式,如下所示。如果有多个模态,则之前的模态将被隐藏。
.modal.show.modal--open:has(~ .modal.show.modal--open){
opacity: 0;
}
不。这不可能通过CSS实现。它将“级联”放在心上;-)。
然而,如果您能够将JavaScript添加到页面中,那么一点点jQuery可以帮助您实现最终目标。您可以使用jQuery的find对目标元素/class/id执行“前瞻”,然后回溯选择目标。然后使用jQuery重新编写元素的DOM(CSS)。
根据迈克·布兰特的回答,下面的jQuery片段可能会有所帮助。
$('p + ul').prev('p')
这首先选择紧跟在<p>后面的所有<ul>。然后,它“回溯”从这组<ul>s中选择所有以前的<p>s。
实际上,通过jQuery选择了“上一个兄弟姐妹”。现在,使用.css函数为该元素传递css新值。
在我的例子中,我想找到一种方法来选择一个id为#full-width的DIV,但前提是它有一个(间接的)子代DIV,其类为.companies。
我已经控制了.companies下的所有HTML,但无法更改上面的任何HTML。级联只朝着一个方向:向下。
因此,我可以选择所有#全宽。或者,我可以选择只遵循#全宽度的公司。但我不能只选择#继续的全宽度。公司。
再次,我无法在HTML中添加任何更高级别的公司。HTML的这部分是外部编写的,并封装了我们的代码。
但是使用jQuery,我可以选择所需的#全宽,然后分配适当的样式:
$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );
这将查找所有的#full-width.companies,并只选择那些.companie,类似于CSS中选择器用于针对标准中的特定元素的方式。然后,它使用.parents“回溯”并选择.acompany的所有父级,但是过滤这些结果以仅保留#填充宽度元素,它只选择一个full-width元素,如果它有一个.companies类后代。最后,它为结果元素分配一个新的CSS(宽度)值。
$(“.parent”).find(“.change parent”).parents(“.parint”).css(“背景色”,“深红色”);第二部分{背景色:浅蓝色;宽度:120px;高度:40px;边框:1px实心灰色;填充:5px;}.包装器{背景色:蓝色;宽度:250px;高度:165px;}.父级{背景色:绿色;宽度:200px;高度:70px;}<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><html><div class=“wrapper”><div class=“parent”>“parent”变为红色<div class=“change parent”>后代:“更改父对象”</div></div><div class=“parent”>“父级”保持绿色<div class=“nope”>后代:“nope”</div></div></div>目标<b>“<span style=“color:dark green”>父</span>”</b>将<span style=”color:red“>变为红色</span><br><b>只有当<b>具有</b>“change parent”的后代时,才</b><br><br>(反向级联,向前看,父级非后代)</html>
jQuery参考文档:$()或jQuery():DOM元素。.find:获取当前匹配元素集合中每个元素的后代,通过选择器、jQuery对象或元素进行筛选。.parents:获取匹配元素集合中每个元素的前一个同级元素。如果提供了选择器,则仅当它与该选择器匹配时,它才会检索上一个同级(过滤结果以仅包括列出的元素/选择器)。.css:为匹配元素集设置一个或多个css财产。