加号选择器（+）用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的？
当前回答
+是给下一个兄弟姐妹的。是否有与前一个相同的兄弟姐妹
您可以使用两个斧头选择器：！和
传统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>
其他回答
我解决了这个问题，将元素放在一个柔性框中，然后使用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>
目前还没有正式的方法来做到这一点，但你可以使用一个小技巧来实现这一点！请记住，它是实验性的，并且有一些限制。。。（如果您担心导航器兼容性，请检查此链接）
您可以做的是使用CSS3选择器：名为nth-child（）的伪类
#列表>*{显示：内联块；填充：20px 28px；右边距：5px；边框：1px实心#bbb；背景：#ddd；颜色：#444；边距：0.4em 0；}#列表：第n个子项（-n+4）{颜色：#600b90；边框：1px红色虚线；背景：橙色；}<p>orange元素是使用li:nth child（-n+4）选择的上一个同级li</p><div id=“list”><span>1</span><！--将选择--><p>2</p><！--将选择--><p>3</p><！--将选择--><div>4</div><！--将选择--><div>5</div><p>6个</p><p>7个</p><p>8个</p><p>9个</p></div>
局限性
不能基于下一个元素的类选择上一个元素伪类也是如此
我也有同样的问题，但后来我有了“嘘”的一刻。而不是写作
x ~ y
写
y ~ x
显然，这与“x”而不是“y”匹配，但它回答了“有匹配吗？”的问题，简单的DOM遍历可能会比javascript中的循环更有效地找到正确的元素。
我意识到最初的问题是一个CSS问题，所以这个答案可能完全不相关，但其他Javascript用户可能会像我一样通过搜索发现这个问题。
我遇到了一个类似的问题，发现所有这类问题都可以通过以下方式解决：
给你的所有物品一种风格。为所选项目指定样式。使用+或~为下一项指定样式。
这样，您就可以设置当前项、先前项（所有项都被当前项和下一项覆盖）以及下一项的样式。
例子：
/* 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中有两个后续的同级选择器：
+是紧接其后的同级选择器~是任何后续的同级选择器
在传统的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>
