<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* background: #61e93e ;*/
/*}*/
/*1.后代选择器*/
/* body p{*/
/* background:red;*/
/* }*/
/*2.子选择器，只有一代*/
/*body>p{*/
/* background: #61e93e;*/
/*}*/
/*3.相邻兄弟选择器 只有一个，对下不对上*/
/* .active + p{*/
/* background: aqua;*/
/* }*/
/*4.通用选择器 当前选中元素的向下的所有兄弟元素*/
.active~p{
background: darkviolet;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6 </p>
</li>
</ul>
<p class="active">p7</p>
<p>p8</p>
<p>p9</p>
</body>
</html>
