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