我也有同样的问题，但后来我有了“嘘”的一刻。而不是写作

x ~ y

写

y ~ x

显然，这与“x”而不是“y”匹配，但它回答了“有匹配吗？”的问题，简单的DOM遍历可能会比javascript中的循环更有效地找到正确的元素。

我意识到最初的问题是一个CSS问题，所以这个答案可能完全不相关，但其他Javascript用户可能会像我一样通过搜索发现这个问题。

+是给下一个兄弟姐妹的。是否有与前一个相同的兄弟姐妹

您可以使用两个斧头选择器：！和

传统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>

我找到了最简单的解决方案。它可能只适用于你正在做的事情。

假设您想将鼠标悬停在“sibling_2”上以更改以下示例中的“sibling_1”：

<div class='parent'><div class='sibling_1'></div><div class='sibling_2'></div></div>

由于没有以前的元素选择器，您可以简单地切换“sibling_1”和“sibling_2”并应用，使它们看起来相同。

.父级{显示：柔性；弯曲方向：行反转；}

现在您可以这样选择它们。.sibling_1：悬停~.sibling_2{#您的CSS}

三个技巧：基本上，颠倒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>

没有“前一选择器”，但可以使用：not和~（“后选择器”）的组合。没有逆序，没有javascript。

.父级a{颜色：蓝色}.父项a.活动{颜色：红色}.parent a：不是（.parent a.active~a）{颜色：红色}<div class=“parent”><a href=“”>链接</a><a href=“”>链接</a><a href=“”class=“active”>链接</a><a href=“”>链接</a><a href=“”>链接</a></div>

我认为我的方法比“设置所有div的样式，而不是删除div之后的样式”，或者使用javascript，或者使用相反的顺序更直接。

没有这样的选择器，但在DOM API中有一个非常只读的属性

Node.previousSibling节点