CSS -> 层次选择器
1. 后代选择器
- 在某个元素的后面
/*1、后代选择器*/
body p{
background: aqua;
}
2. 子选择器
- 一代
/*2、子选择器*/
body>p{
background: blue;
}
3. 相邻兄弟选择器
- 同辈 ,对下不对上!只有一个
/*3、相邻兄弟选择器 只有一个!向下!*/
.active+p{
background: deeppink;
}
4. 通用选择器
/*4、通用兄弟选择器:当前选中元素的向下的所有兄弟元素*/
.active~p{
background: darkcyan;
}
整体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p {*/
/* background: aquamarine;*/
/*}*/
/*1、后代选择器*/
/*body p{*/
/* background: aqua;*/
/*}*/
/*2、子选择器*/
/*body>p{*/
/* background: blue;*/
/*}*/
/*3、相邻兄弟选择器 只有一个!向下!*/
/*.active + p{*/
/* background: deeppink;*/
/*}*/
/*4、通用兄弟选择器:当前选中元素的向下的所有兄弟元素*/
.active~p{
background: darkcyan;
}
</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>