加号选择器（+）用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的？
当前回答
可以按如下方式使用：has（）。
.thePrevious:has(+ .theNextSibling)
我使用它来修复重叠的引导模式，如下所示。如果有多个模态，则之前的模态将被隐藏。
.modal.show.modal--open:has(~ .modal.show.modal--open){
opacity: 0;
}
其他回答
我遇到了一个类似的问题，发现所有这类问题都可以通过以下方式解决：
给你的所有物品一种风格。为所选项目指定样式。使用+或~为下一项指定样式。
这样，您就可以设置当前项、先前项（所有项都被当前项和下一项覆盖）以及下一项的样式。
例子：
/* all items (will be styled as previous) */
li {
color: blue;
}
/* the item i want to distinguish */
li.milk {
color: red;
}
/* next items */
li ~ li {
color: green;
}
<ul>
<li>Tea</li>
<li class="milk">Milk</li>
<li>Juice</li>
<li>others</li>
</ul>
希望这对某人有所帮助。
选择器级别4建议：has（）（以前是主题指示符！），有一天，它将允许您选择前一个兄弟姐妹：
previous:has(+ next) {}
或（对于一般上一个兄弟姐妹而不是相邻兄弟姐妹）：
previous:has(~ next) {}
在撰写本文时：has｛｝被大多数但不是所有主要浏览器支持。支持正在改善。
多年来，这个答案吸引了数十条“仍然不支持”的评论（现已删除）。请不要再添加了。答案中有一个指向定期更新的浏览器支持图表的链接。
目前还没有正式的方法来做到这一点，但你可以使用一个小技巧来实现这一点！请记住，它是实验性的，并且有一些限制。。。（如果您担心导航器兼容性，请检查此链接）
您可以做的是使用CSS3选择器：名为nth-child（）的伪类
#列表>*{显示：内联块；填充：20px 28px；右边距：5px；边框：1px实心#bbb；背景：#ddd；颜色：#444；边距：0.4em 0；}#列表：第n个子项（-n+4）{颜色：#600b90；边框：1px红色虚线；背景：橙色；}<p>orange元素是使用li:nth child（-n+4）选择的上一个同级li</p><div id=“list”><span>1</span><！--将选择--><p>2</p><！--将选择--><p>3</p><！--将选择--><div>4</div><！--将选择--><div>5</div><p>6个</p><p>7个</p><p>8个</p><p>9个</p></div>
局限性
不能基于下一个元素的类选择上一个元素伪类也是如此
我遇到了同样的问题，当我试图更改输入焦点上的前置图标填充颜色时，我的代码看起来像这样：
<template #append>
<b-input-group-text><strong class="text-danger">!</strong></b-input-group-text>
</template>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />
问题是我使用了一个vue引导槽来注入前缀，所以即使我改变了位置，输入后仍然会呈现
嗯，我的解决方案是滑动它们的位置，并添加自定义前缀和使用的~符号，因为css不支持前一个同级。
<div class="form-input-prepend">
<svg-vue icon="common.lock" />
</div>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />
Scss样式
.form-control:focus ~ .form-input-prepend {
svg path {
fill: $accent;
}
}
因此，只需尝试更改其位置，如果需要，请使用css order或position:absolute；以实现您想要的，并避免使用javascript来满足此类需求。
不。这不可能通过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财产。
