CSS层次选择器

2.2层次选择器

  1. 后代选择器：祖爷爷、爷爷、爸爸
  2. 子选择器 一代，儿子
  3. 相邻兄弟选择器 同辈
  4. 通用选择器
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*p{*/
    /*  background: #34ee0b;*/
    /*}*/
  /*  后代选择器*/
  /*  body p{*/
  /*    background: red;*/
  /*  }*/
  /*  子选择器*/
  /*  body>p{*/
  /*    background: yellow;*/
  /*  }*/
  /*  相邻兄弟选择器
  只有一个，相邻（向下）*/
    /*.active+p{*/
    /*  background: blue;*/
    /*}*/
    /*通用兄弟选择器，当前选中元素的向下所有兄弟元素*/
    .active~p{
      background: aliceblue;
    }
  </style>
</head>
<body>
<p>po</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>
posted @ 2023-04-06 13:50  爱的加勒比  阅读(35)  评论(0)    收藏  举报