css - 如何选择没有嵌套的类？CSS

Question

例子：

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

假设我想改变.two我:hoverover的背景颜色.one，是否可以进行这种选择？

Answer 1

假设我想在 :hover .one 时更改 .two 的背景颜色，是否可以进行这种选择？

是的，一种选择是使用

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

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

这只有在 .two 与 .one 相邻时才有效，那么如果它们彼此不相邻怎么办？

您只需使用一般的兄弟组合器，~

.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;
 }

这仅在您的源代码.two中出现时才有效.one