加号选择器（+）用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的？
当前回答
如果您知道确切的位置，那么基于：nth-child（）的排除以下所有兄弟姐妹将起作用。
ul li:not(:nth-child(n+3))
这将选择第三个之前的所有lis（例如第一个和第二个）。但是，在我看来，这看起来很难看，而且用例非常紧凑。
您还可以从右到左选择第n个子项：
ul li:nth-child(-n+2)
这也是一样的。
其他回答
我也有同样的问题，但后来我有了“嘘”的一刻。而不是写作
x ~ y
写
y ~ x
显然，这与“x”而不是“y”匹配，但它回答了“有匹配吗？”的问题，简单的DOM遍历可能会比javascript中的循环更有效地找到正确的元素。
我意识到最初的问题是一个CSS问题，所以这个答案可能完全不相关，但其他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财产。
虽然没有以前的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五星评级系统。我需要为之前的星星上色（或更换图标）。通过将每个元素向右浮动，我基本上得到了相同的效果（因此，星星的html必须写为“向后”）。
我在本例中使用FontAwesome，并在fa-star-o和fa-star的unicode之间进行交换http://fortawesome.github.io/Font-Awesome/
CSS:
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* set all stars to 'empty star' */
.stars-container {
display: inline-block;
}
/* set all stars to 'empty star' */
.stars-container .star {
float: right;
display: inline-block;
padding: 2px;
color: orange;
cursor: pointer;
}
.stars-container .star:before {
content: "\f006"; /* fontAwesome empty star code */
}
/* set hovered star to 'filled star' */
.star:hover:before{
content: "\f005"; /* fontAwesome filled star code */
}
/* set all stars after hovered to'filled star'
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
content: "\f005"; /* fontAwesome filled star code */
}
HTML格式：(40)
JSFiddle：http://jsfiddle.net/andrewleyva/88j0105g/
我找到了一种方法来设计所有以前的兄弟姐妹（与~相反），这取决于你需要什么。
假设你有一个链接列表，当你悬停在一个链接上时，之前的所有链接都应该变成红色。你可以这样做：
/*默认链接颜色为蓝色*/.父级a{颜色：蓝色；}/*上一个兄弟姐妹应该是红色的*/.parent:悬停{颜色：红色；}.父项a：悬停，.父a:悬停~a{颜色：蓝色；}<div class=“parent”><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a></div>
