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，如果控制自己的子元素，使用空格隔开

posted @ 2021-08-18 17:38  专注网站建设和推广  阅读(1000)  评论(0)    收藏  举报