层次选择器
1、后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你
/*后代选择器*/
body p{
background: lightpink;
}
2、子选择器 一代，儿子
/*子选择器*/
body>p{
background: cornflowerblue;
}
3、相邻兄弟选择器 同辈
/*相邻兄弟选择器: 只有一个，相邻(对下) */
.active + p{
background: blue;
}
4、通用选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*p{
color: coral;
}*/
/*!*后代选择器*!*/
/*body p{*/
/* background: lightpink;*/
/* }*/
/*子选择器*/
/*body>p{*/
/* background: cornflowerblue;*/
/*}*/
/*相邻兄弟选择器: 只有一个，相邻(对下) */
/*.active + p{*/
/* background: blue;*/
/*}*/
/*通用兄弟选择器,当前选中元素的向下的所有兄弟元素*/
.active~p{
background: darkgreen;
}
style>
head>
<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>
body>
html>