加号选择器（+）用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的？
当前回答
我遇到了一个类似的问题，发现所有这类问题都可以通过以下方式解决：
给你的所有物品一种风格。为所选项目指定样式。使用+或~为下一项指定样式。
这样，您就可以设置当前项、先前项（所有项都被当前项和下一项覆盖）以及下一项的样式。
例子：
/* 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>
希望这对某人有所帮助。
其他回答
不。这不可能通过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财产。
可以按如下方式使用：has（）。
.thePrevious:has(+ .theNextSibling)
我使用它来修复重叠的引导模式，如下所示。如果有多个模态，则之前的模态将被隐藏。
.modal.show.modal--open:has(~ .modal.show.modal--open){
opacity: 0;
}
对于我的用例，需要更改焦点上的先前元素样式，并且悬停在父元素中只有两个项。为此，使用了：focuswithin和：hover伪类。
无论何时发生聚焦/悬停事件，都可以选择
.root元素：悬停.element到样式｛background color:red；｝.root元素：将焦点放在.element中，以设置样式｛background color:green；｝<div class=“root元素”>文本聚焦</span><input type=“text”placeholder=“type To Style”/></div>
我解决了这个问题，将元素放在一个柔性框中，然后使用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>
选择器级别4建议：has（）（以前是主题指示符！），有一天，它将允许您选择前一个兄弟姐妹：
previous:has(+ next) {}
或（对于一般上一个兄弟姐妹而不是相邻兄弟姐妹）：
previous:has(~ next) {}
在撰写本文时：has｛｝被大多数但不是所有主要浏览器支持。支持正在改善。
多年来，这个答案吸引了数十条“仍然不支持”的评论（现已删除）。请不要再添加了。答案中有一个指向定期更新的浏览器支持图表的链接。
