层次选择器

层次选择器

  • 后代选择器：在某个元素后面 {}
/*后代选择器*/
body p{
    color: aqua;
}
  • 子选择器
body>h1{
    color:chocolate;
}
  • 相邻兄弟选择器
/*相邻兄弟选择器：只有一个，相邻（向下）*/
.active + h2{
    background: #c4fff5;
}
  • 通用选择器
/*通用兄弟选择器，当前选中元素的向下的所有兄弟*/
.active~h3{
    background: brown ;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        /*后代选择器*/
        body p{
            color: aqua;
        }
        /*子选择器*/
        body>h1{
            color:chocolate;
        }
        /*相邻兄弟选择器：只有一个，相邻（向下）*/
        .active + h2{
            background: #c4fff5;
        }
        /*通用兄弟选择器，当前选中元素的向下的所有兄弟*/
        .active~h3{
            background: brown ;
        }
    </style>
</head>
<body>
<h1 class="active">h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<ul>
    <li><p>p1</p></li>
    <li><p>p2</p></li>
    <li><p>p3</p></li>
</ul>

</body>
</html>
posted @ 2021-05-07 11:11  saxon宋  阅读(70)  评论(0)    收藏  举报