1.层次模型：
2.层次选择器
1、后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2021-11-21</title>
</head>
<style type="text/css">
/*后代选择器*/
body p{
background: #0000FF;
}
</style>
<body>
<p>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>
</body>
</html>
2.子选择器：一代 ，儿子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2021-11-21</title>
</head>
<style type="text/css">
/*子选择器*/
body>p{
background: #000000;
}
</style>
<body>
<p>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>
</body>
</html>
3.相邻兄弟选择器 ： 同辈
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2021-11-21</title>
</head>
<style type="text/css">
/*相邻兄弟选择器：只有一个，相邻，（向下）*/
.active + p{
background: #0000FF;
}
</style>
<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>
4.通用选择器:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2021-11-21</title>
</head>
<style type="text/css">
/*通用兄弟选择器:当前选中元素所有向下的兄弟元素*/
.active~p{
background: #0000FF;
}
</style>
<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>p7</p>
</body>
</html>
