加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
当前回答
可以按如下方式使用:has()。
.thePrevious:has(+ .theNextSibling)
我使用它来修复重叠的引导模式,如下所示。如果有多个模态,则之前的模态将被隐藏。
.modal.show.modal--open:has(~ .modal.show.modal--open){
opacity: 0;
}
其他回答
选择器级别4建议:has()(以前是主题指示符!),有一天,它将允许您选择前一个兄弟姐妹:
previous:has(+ next) {}
或(对于一般上一个兄弟姐妹而不是相邻兄弟姐妹):
previous:has(~ next) {}
在撰写本文时:has{}被大多数但不是所有主要浏览器支持。支持正在改善。
多年来,这个答案吸引了数十条“仍然不支持”的评论(现已删除)。请不要再添加了。答案中有一个指向定期更新的浏览器支持图表的链接。
另一种flexbox解决方案
您可以使用与HTML中元素的顺序相反的方式。然后除了使用Michael_B的答案中的顺序外,还可以使用灵活的方向:行反转;或弯曲方向:列反转;这取决于您的布局。
工作样本:
.flex弯曲{显示:柔性;弯曲方向:行反转;/*在“反转”结尾(即开头)对齐内容*/调整内容:柔性端;}/*在悬停目标上,其“先前”元素*/.flex项:悬停~.flex项{背景色:石灰;}/*仅用于演示的样式*/.flex项目{背景色:橙色;颜色:白色;填充:20px;字体大小:3rem;边界半径:50%;}<div class=“flex”><div class=“flex item”>5</div><div class=“flex item”>4</div><div class=“flex item”>3</div><div class=“flex item”>2</div><div class=“flex item”>1</div></div>
没有“前一选择器”,但可以使用: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,或者使用相反的顺序更直接。
我解决了这个问题,将元素放在一个柔性框中,然后使用flex direction:column reverse。
然后,我不得不手动反转HTML中的元素(以相反的顺序排列),这看起来很正常,而且很有效!
<div style="display: flex; flex-direction: column-reverse">
<a class="element2">Element 2</a>
<a class="element1">Element 1</a>
</div>
...
<style>
.element2:hover + element1 {
...
}
</style>
没有,也有。
如果必须在输入之前放置标签,只需在输入之后放置标签,并将标签和输入保持在一个div中,并按如下方式设置div的样式:
.输入框{显示:柔性;弯曲方向:列反转;}<div class=“input box”><输入id=“电子邮件”class=“表单项”/><label for=“email”class=“表单项标题”>电子邮件*</label></div>
现在,您可以应用css中提供的标准下一个同级样式选项,并且它看起来就像您使用的是上一个同级的样式。