/*后代选择器:在某个元素的后面*/
body p{
background: #77be64;
}
/*子选择器:一代 儿子*/
body>p{
background: #be5155;
}
head:
/*相邻兄弟选择器 同辈
只有一个 相邻向下
*/
.active + p{
background: #5cbe67;
}
body:
<p >一级</p>
<p class="active">一级</p>
<p>一级</p>
head:
/*通用选择器
当前选中的元素的向下所有的兄弟元素
*/
.active~p{
background: #3c45be;
}
body:
<p >一级</p>
<p class="active">一级</p>
<p>一级</p>
<ul>
<li>
<p>二级</p>
</li>
<li>
<p>二级</p>
</li>
<li>
<p>二级</p>
</li>
</ul>
<p class="active">一级</p>
<p>一级</p>