其他分享
首页 > 其他分享> > CSS层次选择器

CSS层次选择器

作者：互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
  <style>

  /*  后代选择器：在某个元素的后面   祖爷爷  爷爷  爸爸  儿子   */
    body p{
      background: #112233;
    }

  /*  子选择器：  只有一代 只看dody下的那一代  */
    body>p{
      background: #927b46;
    }

  /*  楼下弟弟选择器： 同辈  只有一个 （向下） */
    .active + p{
      background: chartreuse;
    }

  /*  通用弟弟选择器： 当前选中元素的向下的所有弟弟元素（向下不向上） */
    .active~p{
      background: brown;
    }
  </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>

在这里插入图片描述

标签：body,弟弟,层次,background,active,向下,选择器,CSS
来源： https://blog.csdn.net/qishi45/article/details/117003675