加号选择器（+）用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的？
当前回答
我的要求是在@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>
其他回答
/*向所有子级添加样式，然后撤消目标的样式以及你目标的兄弟姐妹*/ul>li{颜色：红色；}ul＞li目标，ul>li.target~li{颜色：继承；}＜ul＞<li>之前</li><li class=“target”>目标</li><li>之后</li><li>之后</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财产。
虽然没有以前的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()
+是给下一个兄弟姐妹的。是否有与前一个相同的兄弟姐妹
您可以使用两个斧头选择器：！和
传统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>
这是类似问题的链接
CSS选择所有以前的兄弟姐妹以获得星级
因此，我使用每个人的回答来发布我的解决方案，任何人都可以将其作为参考，并可能提出改进建议。
//仅用于检查输入值//Consts公司const starRadios=document.querySelectorAll（'input[name=“rating”]'）；//事件监听器starRadios.forEach（（radio）=>radio.addEventListener（'change'，getStarRadioValue））；//获取星形无线电值函数getStarRadioValue（事件）｛警报（event.target.value）//用它做点什么};.星级{字体大小：1.5rem；unicode bidi：bidi覆盖；方向：rtl；文本对齐：左侧；}.star-rating.editable标签：悬停{光标：指针；}.star-rating.editable.icon星形：悬停，.star-rating.editable.icon星形：悬停~.icon星形{背景色：#fb2727！重要的}.icon星形{位置：相对；背景色：#72747d；宽度：32px；高度：32px；显示：内联块；过渡：背景色0.3s；}.icon-star填充{背景色：#fb2727；}.icon星形>标签{显示：内联块；宽度：100%；高度：100%；左：0；顶部：0；位置：绝对；}.icon star>标签>输入[类型=“radio”]{位置：绝对；顶部：0；左：0；变换：translateY（50%）translateX（50%）；显示：无；}<div class=“星级可编辑”><span class=“icon star”><标签><input type=“radio”name=“rating”value=“5”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“4”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“3”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“2”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“1”/></label></span></div>
