如何选择不嵌套的类？ CSS

Question

示例：

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

假设我想在.two :hover之后更改.one的背景颜色，是否可以进行此类选择？

Answer 1

让我说我想改变.two的背景颜色当我：将鼠标悬停在.one上时，是否可以进行这种选择？

是的，一个选项是使用

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

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

只有当.two与.one相邻时才会有效，那么如果它们彼此不相邻会怎样呢？

您只需使用general sibling combinator，~

即可

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

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

Answer 2

如果他们彼此相邻（如您所示），那么您可以使用相邻的（+）选择器：

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

如果他们离得更远，但仍然是兄弟姐妹 - 即在DOM树中的同一级别 - 那么你可以使用兄弟（~）选择器：

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

如果他们比那更远，那么你可能会挣扎 - 目前CSS并不容易。

Answer 3

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

只有在您的来源<{p}}之后显示.two时才有效