<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
width:200px;height:200px;background: red
}
.div1:hover ~p+a{background: red;} //鼠标移动到classname为‘div1’上时,改变与 div1为同级元素关系的 p元素 的相邻 元素a的样式(同级元素:即是指此处的div1与p 必须拥有相同的父级)
p{width:100px;height:30px;background: blue;}
</style>
</head>
<body>
<div class="div1"><p></p></div>
<p></p>
<a>我是紧跟p后面的a标签</a>
<p></p>
<!-- <a>111</a>
--></body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
width:200px;height:200px;background: red
}
.div1:hover ~p+a{background: red;} //鼠标移动到classname为‘div1’上时,改变与 div1为同级元素关系的 p元素 的相邻 元素a的样式(同级元素:即是指此处的div1与p 必须拥有相同的父级)
p{width:100px;height:30px;background: blue;}
</style>
</head>
<body>
<div class="div1"><p></p></div>
<p></p>
<a>我是紧跟p后面的a标签</a>
<p></p>
<!-- <a>111</a>
--></body>
</html>