html中CSS:hover选择器改变子元素、同级元素、就近元素的样式

a:hover

{

background-color:yellow;

}

这是最基础的用法，仅仅改变了元素自身的样式。但真正的乐趣，才刚刚开始。

进阶用法:

用法一：控制子元素的样式

想象一下，你希望鼠标放在一个容器上时，能改变它里面某个子元素的样子。这完全可以实现。比如，当鼠标悬停在类名为“a”的元素上时，让其内部类名为“b”的子元素背景变蓝：

.a:hover .b {

background-color:blue;

}

注意，选择器“.a:hover”和“.b”之间是一个空格。这个空格，就是“父子关系”的钥匙。

用法二：控制同级元素（兄弟元素）

有时候，你想改变的不是“儿子”，而是紧挨着自己的“兄弟”。这时就需要用到相邻兄弟选择器“+”了。例如，让鼠标悬停在.a上时，紧随其后的那个.c元素文字变红：

.a:hover + .c {

color:red;

}

用法三：控制就近元素

如果目标元素不一定是紧挨着的下一个兄弟，而是后面所有的某个同级元素，那该怎么办？通用兄弟选择器“~”就派上用场了。它会选择所有跟在后面的指定同级元素。例如，让鼠标悬停在.a上时，后面所有.d元素的文字都变成粉色：

.a:hover ~ .d {

color:pink;

}

总结一下：

让我们快速回顾这三个进阶用法的核心区别：

1. 中间加空格 —— 用于控制其子元素；

2. 中间加‘+’ —— 用于控制其相邻的兄弟元素；

3. 中间加‘～’ —— 用于控制其后面的所有指定同级元素；