你看一下,用.div3.div2 或者 .div3+.div2都行,关键是在html部分,要把div2放div3下面!
第一种:+ 相邻兄弟选择器(.div3 .div2)只能选择与自己紧紧相连的身后的一个兄弟
第二种:~ 通用兄弟选择器(.div3~ .div2 )只可以选择在自己身后的所有类名是.div2小弟
关键就在于只能改变自身元素后面的元素样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
}
.div1,
.div2,
.div3 {
position: absolute;
}
.div1 {
left: 0;
top: 0;
background: red;
z-index: 900;
}
.div2 {
background: blue;
z-index: 889;
left: 10px;
top: 10px;
}
.div3 {
background: #CCCCCC;
z-index: 887;
left: 20px;
top: 20px;
}
.div2:hover {
z-index: 902;
}
.div3:hover{
z-index: 903;
}
.div3:hover+.div2 {
z-index: 902;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>
</body>
</html>