css之关系选择器

关系选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style type="text/css">
   /*后代选择器*/
    /*div h1 {*/
    /*  color: red;*/
    /*}*/
    /*  自选择器*/
    div>h1{
      color: rosybrown;
    }
    /*  相邻兄弟选择器,只有一个，向下*/
    .active+p{
      color: rosybrown;
    }
/*通用选择器：当前选中元素向下的所有标签，对下不对上*/
 .active～p{
      color: rosybrown;
    }
  </style>
</head>
<!--
关系选择器： 后代选择器

只要是这个元素的后台，样式都会发生变化

关系选择器：子代选择器

只要是这个元素的子代，样式就会发生变化

-->
<body>

<div>
  <h1 class="active">马士兵</h1>
  <h1>马士兵</h1>
  <h1>马士兵</h1>
  <h1>马士兵</h1>

  <span>
      <h1>马士兵</h1>
      <h1>马士兵</h1>
      <h1>马士兵</h1>
  </span>
</div>
</body>
</html>
posted @ 2023-03-01 22:03  King-DA  阅读(21)  评论(0)    收藏  举报