通过CSS的兄弟姐妹悬停不起作用 - 为什么？

Question

我尝试通过悬停其兄弟元素来操纵元素的同胞。我那样做：

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

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

尽管HTML的结构是有点儿像：

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

虽然第一操作工作得很好，第二个（.sw_2-emotionen：悬停〜.sw_2 -technik）什么都不做。我在那里做错了什么？

谢谢！

Answer 1

兄弟姐妹选择器只影响元素，当第二个在页面上的第一个之后 - 而不是相反。

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

的〜组合子分隔两个选择器和仅当它被第一先于第二元件相匹配，并且两个共享一个公共的父。