倒序CSS同胞选择器(~)

Question

我以这种方式使用CSS同胞选择器(~)：

X:hover ~ Y { }

似乎只有当X位于Y之前(在HTML中)时，它才能工作。可以在http://jsfiddle.net/8LFWR/上显示

把Y放在X前面使它停止工作。请参阅http://jsfiddle.net/6WLhe/

知道我该怎么修吗？

Answer 1

单独使用CSS是不可能做到这一点的。~组合器只向一个方向看，您只能将样式应用于选择器中最右边的元素，因此简单地将Y放在X之前是行不通的。

您需要使用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