css控制同级兄弟元素以及兄弟元素的子元素的样式

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>

<style>
.a {color : #FFFF00;}

.a:hover + .b{color : #00FF00;}
.a:hover + .b .c{color : #0000FF;}
</style>
<div class='a'>元素1

</div>
<div class='b'>元素2
<div class='c'>元素2的子元素</div>
</div></html>

总结:

1,控制兄弟元素使用+连接

2,控制兄弟元素下的子元素先用+连接兄弟元素,再用>连接兄弟元素下的子元素

3,如果控制自己的子元素,使用空格隔开

原文地址:https://www.cnblogs.com/JeffreyZhu/p/15157982.html