<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
/* 后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 儿子 */
body p{
background: #112233;
}
/* 子选择器： 只有一代 只看dody下的那一代 */
body>p{
background: #927b46;
}
/* 楼下弟弟选择器： 同辈 只有一个 （向下） */
.active + p{
background: chartreuse;
}
/* 通用弟弟选择器： 当前选中元素的向下的所有弟弟元素（向下不向上） */
.active~p{
background: brown;
}
</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>
</body>
</html>
