/*后代选择器:在某个元素的后面*/
  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>