如何选择不嵌套的类？ CSS

Question

例子：

<div class="one"> 
</div> 
<div class="two"> 
</div> 

比方说，我想改变的.two背景颜色，当我:hover过.one，是有可能做这种选择？

Answer 1

如果他们是彼此相邻（如你已经证明他们），那么你可以使用邻近的（+ ）选择器：

.one:hover+.two { ... } 

如果他们稍微远一点，但仍然是兄弟姐妹 - 即在同一个l埃维尔在DOM树 - 然后你可以使用兄弟（~）选择：

.one:hover~.two { ... } 

如果他们进一步远离，那么你可能很难 - CSS不会使它容易的时刻。

Answer 2

.one:hover + .two{ 
background-color: red; 
} 

这只有当.two是.one后出现在源

Answer 3

比方说，我想改变。二的背景颜色，当我：悬停。一，是有可能做到这一点那种选择？

是，一个选择是使用

.one:hover + .two { 
background: olive; /* + will select an immediate sibling */ 
} 

http://jsfiddle.net/N6peE/1/

这只会工作，如果。二是相邻的。一，所以，如果他们不是彼此相邻？

你只使用general sibling combinator，~

.one:hover ~ .two { 
background: olive; 
} 

http://jsfiddle.net/N6peE/2/