加号选择器（+）用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的？
当前回答
三个技巧：基本上，颠倒HTML中元素的HTML顺序，并使用~Next同级运算符：
1.使用CSS Flex和行反转
.反向{显示：内联flex；弯曲方向：行反转；}.reverse span:hover~span｛/*在span悬停时，将其“先前”元素作为目标*/背景：金色；}将光标悬停在SPAN上，可以看到前面正在设置样式的元素<br><div class=“reverse”><!-- 反转内部元素的顺序--><span>5个</span><span>4个</span><span>3个</span><span>2个</span><span>1个</span></div>
2.使用方向为RTL的Flex
.反向{显示：内联flex；方向：rtl；}.reverse span:hover~span｛/*在span悬停时，将其“先前”元素作为目标*/背景：红色；}将光标悬停在SPAN上，可以看到前面正在设置样式的元素<br><div class=“reverse”><!-- 反转内部元素的顺序--><span>5个</span><span>4个</span><span>3个</span><span>2个</span><span>1个</span></div>
3.使用浮动右侧
反向｛显示：内联块；}.反向跨度{浮动：右侧；}.reverse span:hover~span｛/*在span悬停时，将其“先前”元素作为目标*/背景：红色；}将光标悬停在SPAN上，可以看到前面正在设置样式的元素<br><div class=“reverse”><!-- 反转内部元素的顺序--><span>5个</span><span>4个</span><span>3个</span><span>2个</span><span>1个</span></div>
其他回答
你可以使用双重否定
SELECTOR:not([SELECTOR]FILTER):not([SELECTOR]FILTER + SELECTOR) { ... }
用TAG或.CLASS替换SELECTOR（使用#ID可能太具体）。将FILTER替换为其他：PSUEDO-SELECTOR（我只尝试过：悬停）或.CLASS（更多关于通过Javascript切换的信息）。
因为典型的用法可能依赖于悬停（参见下面的示例）
/* Effect only limited when hovering */
TAG.CLASS:not(TAG.CLASS:hover):not(TAG.CLASS:hover + TAG.CLASS) {}
/* Effect only applied when hovering */
PARENT.CLASS:hover > CHILD.CLASS:not(CHILD.CLASS:hover):not(CHILD.CLASS:hover + CHILD.CLASS) {}
/*解决方案*/div.parent:hover>div.child:not（：hover）：not（：悬停~.child）{背景色：红色；边界半径：1.5em；}div.parent:hover>div.child:not（：hover）：not（：悬停~.child）>div{背景色：黄色；}/*做得漂亮（有点）*/分部租金{宽度：9em；高度：9em；/*布局*/显示：栅格；栅格样板列：自动自动；栅格样板行：自动自动；}分部子项{/*尺寸*/高度：3em；宽度：3em；/*布局*/位置：相对；/*光标*/光标：指针；/*演示文稿*/边框：1px黑色实心；边界半径：1.5em；}.星{/*尺寸*/宽度：2.5em；高度：2.5em；/*放置*/位置：绝对；顶部：50%；左：50%；转换：转换（-50%，-50%）；/*几何形状*/-webkit剪辑路径：多边形(50% 0%,63% 38%,100% 38%,69% 59%,82% 100%,50% 75%,18% 100%,31% 59%,0% 38%,37% 38%);剪辑路径：多边形(50% 0%,63% 38%,100% 38%,69% 59%,82% 100%,50% 75%,18% 100%,31% 59%,0% 38%,37% 38%);/*演示文稿*/背景色：浅灰色；}div.child:悬停{/*演示文稿*/背景色：黄色；边界半径：1.5em；}div.child:悬停>div.star{/*演示文稿*/背景色：红色；}<div class=“parent”><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div></div>
+是给下一个兄弟姐妹的。是否有与前一个相同的兄弟姐妹
您可以使用两个斧头选择器：！和
传统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>
我的要求是在@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>
我也有同样的问题，但后来我有了“嘘”的一刻。而不是写作
x ~ y
写
y ~ x
显然，这与“x”而不是“y”匹配，但它回答了“有匹配吗？”的问题，简单的DOM遍历可能会比javascript中的循环更有效地找到正确的元素。
我意识到最初的问题是一个CSS问题，所以这个答案可能完全不相关，但其他Javascript用户可能会像我一样通过搜索发现这个问题。
考虑flex和grid布局的order属性。
我将在下面的示例中重点讨论flexbox，但同样的概念适用于网格。
使用flexbox，可以模拟以前的同级选择器。
特别是，flex order属性可以在屏幕上移动元素。
下面是一个示例：
当元素B悬停时，您希望元素A变为红色。＜ul＞<li>一个</li><li>B级</li></ul>
步骤
让ul成为一个柔性容器。ul｛display：flex；｝
颠倒标记中兄弟姐妹的顺序。＜ul＞<li>B级</li><li>一个</li></ul>
使用同级选择器以元素a为目标（~或+即可）。li：悬停+li｛背景色：红色；｝
使用弹性顺序属性可以恢复视觉显示上同级的顺序。li：最后一个子项｛顺序：-1；｝
……瞧！上一个同级选择器已诞生（或至少是模拟的）。
以下是完整代码：
上一页{显示：柔性；}li：悬停+li{背景色：红色；}李：最后一个孩子{顺序：-1；}/*非必要装饰风格*/李{高度：200px；宽度：200px；背景色：浅绿色；边距：5px；列表样式类型：无；光标：指针；}＜ul＞<li>B级</li><li>一个</li></ul>
根据flexbox规范：
5.4.显示顺序：顺序属性默认情况下，柔性项的显示和布局与源文档中显示的顺序相同。这个order属性可用于更改此排序。order属性通过将弹性项分配给序数组来控制弹性项在弹性容器中的显示顺序。它接受一个<integer>值，该值指定flex项的顺序组属于。
所有弹性项的初始订单值为0。
另请参见CSS网格布局规范中的顺序。
使用flex order属性创建的“以前的同级选择器”示例。
.container｛display：flex；｝.box5｛顺序：1；｝.box5:悬停+.box4｛背景颜色：橙色；字体大小：1.5em；｝.box6｛顺序：-4；｝.box7｛顺序：-3；｝.box8｛顺序：-2；｝.box9｛顺序：-1；｝.box9:hover~：not（.box12）：第n个孩子（-1n+5）{背景色：橙色；字体大小：1.5em；}.box12｛顺序：2；｝.box12:hover~：最后第n个孩子（-1n+2）{背景色：橙色；字体大小：1.5em；}.box21｛顺序：1；｝.box21:悬停~.box｛背景色：橙色；字体大小：1.5em；｝/*非必要装饰风格*/.容器{填充：5px；背景色：#888；}.box格式{高度：50px；宽度：75px；边距：5px；背景色：浅绿色；显示：柔性；对齐内容：中心；对齐项目：居中；文本对齐：居中；光标：指针；}<p>使用flex＜code＞order＜/code＞属性构造上一个同级选择器</p><div class=“container”><div class=“box box1”><span>1</span></div><div class=“box box2”><span>2</span></div><div class=“box box3”><span>3</span></div><div class=“box box5”><span>HOVER ME</span></div><div class=“box box4”><span>4</span></div></div><br><div class=“container”><div class=“box box9”><span>HOVER ME</span></div><div class=“box box12”><span>HOVER ME</span></div><div class=“box box6”><span>6</span></div><div class=“box box7”><span>7</span></div><div class=“box box8”><span>8</span></div><div class=“box box10”><span>10</span></div><div class=“box box11”><span>11</span></div></div><br><div class=“container”><div class=“box box21”><span>HOVER ME</span></div><div class=“box box13”><span>13</span></div><div class=“box box14”><14</span></div><div class=“box box15”><15</span></div><div class=“box box16”><span>16</span></div><div class=“box box17”><span>17</span></div><div class=“box box18”><span>18</span></div><div class=“box box19”><span>19</span></div><div class=“box box20”><span>20</span></div></div>
jsFiddle公司
附带说明——关于CSS的两个过时的信念
Flexbox打破了长期以来对CSS的信念。
一个这样的信念是，在CSS中不可能有前一个同级选择器。
如果说这种信念是普遍存在的，那就轻描淡写了。以下是关于堆栈溢出的相关问题示例：
使用选择器选择CSS中元素的前一个同级CSS：选择上一个同级CSS选择上一个同级CSS中的上一个相邻选择器悬停时选择上一个同级获取前一个同级的CSS选择器使用CSS更改悬停时同级元素的颜色如何使用selenium css语法选择上一个同级CSS选择器，用于选择在另一个元素之前出现的元素？如何仅使用CSS将样式添加到活动输入的上一个同级下一个和上一个元素的CSS选择器悬停div时如何影响其他元素
如上所述，这种观点并不完全正确。可以使用flex order属性在CSS中模拟以前的同级选择器。
z指数神话
另一个长期以来的观点是，z索引只对定位元素有效。
事实上，该规范的最新版本——W3C编辑草案——仍然认为这是正确的：
9.9.1指定堆栈级别：z索引所有物z指数值：auto||inherit初始：自动适用于：定位的图元继承：否百分比：不适用媒体：视觉计算值：按规定（添加强调）
然而，事实上，这些信息是过时和不准确的。
即使位置是静态的，作为弹性项或网格项的元素也可以创建堆叠上下文。
4.3.柔性项目Z-订购Flex项的绘制与内联块完全相同，除了使用订单修改的文档顺序代替原始文档顺序和z索引值而不是自动创建堆叠上下文，即使位置是静态的。5.4.Z轴排序：Z轴索引属性网格项的绘制顺序与内联块完全相同，除了顺序修改的文档顺序是用于代替原始文档顺序和z索引值，而不是自动创建堆叠上下文，即使位置是静态的。
下面是一个z索引在非定位弹性项上工作的演示：https://jsfiddle.net/m0wddwxs/
