Html 通过css的兄弟悬停不'；不行-为什么？

我试图通过悬停元素的同级元素来操纵元素的同级。我是这样做的：

.sw_2-technik + .sw_2-emotionen{
    background:green;
}

.sw_2-emotionen:hover ~ .sw_2-technik{
    background:orange;
}

<section class="wrapper">
<div class="sw_2-technik"></div>
<div class="sw_2-emotionen"></div>
</section>

而html结构有点像：

.sw_2-technik + .sw_2-emotionen{
    background:green;
}

.sw_2-emotionen:hover ~ .sw_2-technik{
    background:orange;
}

<section class="wrapper">
<div class="sw_2-technik"></div>
<div class="sw_2-emotionen"></div>
</section>

虽然第一个操作运行良好，但第二个操作（.sw_2-emotionen:hover~.sw_2-technik）什么也不做。我在那里做错了什么

---

谢谢

同级选择器仅在页面上第二个选择器位于第一个选择器之后时才影响元素，反之亦然

~combinator将两个选择器分开，并且仅当第二个元素前面有第一个元素且两个元素共享一个共同的父元素时，才匹配第二个元素

---

同级选择器仅在页面上第二个选择器位于第一个选择器之后时才影响元素，反之亦然

~combinator将两个选择器分开，并且仅当第二个元素前面有第一个元素且两个元素共享一个共同的父元素时，才匹配第二个元素

---

你只能瞄准下一个兄弟姐妹，而不是上一个如果你想用CSS瞄准上一个兄弟姐妹，这里有一个干净简单的方法：你只能瞄准下一个兄弟姐妹，而不是上一个如果你想用CSS瞄准上一个兄弟姐妹，这里有一个干净简单的方法：但我没有确切的情况吗？由于两个兄弟元素都在同一个包装器（公共父元素）中，尽管我不知道“preferred”的确切含义，但第二个元素实际上紧跟在第一个元素之后。还是我有什么不对劲？谢谢@Daiaai将

sw_2-emotionen

放在

sw_2-technik

之前，您会看到。@uom pgregorio但我认为“+”是专门用于这些变形的，以在该变形之后的元素为目标？那么我为什么要使用“~”呢？简单的答案是：没有JS，我的情况是不可行的？@daiaai第一个元素需要在页面上的第二个元素之前，如，在HTML源代码中。@daiaai如果目标的两个元素之间有一个或多个元素，您将使用

~

。但我不知道确切的情况吗？由于两个兄弟元素都在同一个包装器（公共父元素）中，尽管我不知道“preferred”的确切含义，但第二个元素实际上紧跟在第一个元素之后。还是我有什么不对劲？谢谢@Daiaai将

sw_2-emotionen

放在

sw_2-technik

之前，您会看到。@uom pgregorio但我认为“+”是专门用于这些变形的，以在该变形之后的元素为目标？那么，我为什么要使用“~”呢？简单的回答是：没有JS，我的情况是不可行的？@daiaai第一个元素需要在页面上的第二个元素之前，就像在HTML源代码中一样。@daiaai如果目标的两个元素之间有一个或多个元素，那么您将使用

~

。