具有反转顺序的CSS兄弟选择器（〜）

Question

我正在使用CSS兄弟选择器（〜）：

X:hover ~ Y { }

似乎只有在X位于Y之前（在HTML中）才有效。 可以在http://jsfiddle.net/8LFWR/

显示

在X之前放置Y使其停止工作。 见http://jsfiddle.net/6WLhe/

我知道如何解决它？

Answer 1

单独使用CSS无法做到这一点。 ~组合器只在一个方向上查看，您只能将样式应用于选择器中最右边的元素，因此只需在X之前放置Y就不起作用。

您需要使用JavaScript来执行此操作。

Answer 2

X~Y

ul ~ p {  
   color: red;  
} 

这个兄弟组合器类似于X + Y，但it’s less strict。虽然相邻的选择器（ul + p）只会选择紧跟前一个选择器之前的第一个元素，但这个选择器更加通用。它将参考我们上面的例子选择任何p元素，只要它们遵循ul。

the-30-css-selectors-you-must-memorize