/*层次选择器：
1.后代选择器
2.子选择器
3.相邻弟弟选择器
4.通用弟弟选择器
*/
/*1.后代选择器:在某个元素后面所有的指定元素*/
/*body p{*/
/* background: red;*/
/*}*/
/*2.子选择器：在某个元素后面所有的第一代指定元素*/
/*body>p{*/
/* background: red;*/
/*}*/
/*3.相邻弟弟选择器:就同一级别向下的一个指定元素*/
/*.active+p{*/
/* background: red;*/
/*}*/
/*4.通用弟弟选择器：就同一级别向下的全部指定元素*/
.active~p{
background: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<p>0</p>
<p class="active">1</p>
<p>2</p>
<p>3</p>
<ul>
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
</ul>
<p>7</p>
</body>
</html>