CSS层次选择器

1.层次选择器

1.1 后代选择器

选择某一个元素后面的所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        body h1{
            background: antiquewhite;
        }
    </style>
</head>
<body>
    <h1>后代选择器</h1>
    <h1>后代选择器</h1>
    <h1>后代选择器</h1>
</body>
</html>

 1.2 子选择器

会选择元素后第一层次的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        body > h1{
            background: antiquewhite;
        }
    </style>
</head>
<body>
    <h1>子选择器</h1>
    <div>
        <h1>子选择器</h1>
    </div>
</body>
</html>

 1.3 相邻兄弟选择器

会选择元素向下第一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        .active + h1{
            background: antiquewhite;
        }
    </style>
</head>
<body>
    <h1>相邻兄弟选择器</h1>
    <h1 class="active">相邻兄弟选择器</h1>
    <h1>相邻兄弟选择器</h1>
</body>
</html>

 1.4 通用选择器

会选择到元素向下相邻的所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        .active~h1{
            background: antiquewhite;
        }
    </style>
</head>
<body>
    <h1>相邻兄弟选择器</h1>
    <h1 class="active">相邻兄弟选择器</h1>
    <h1>相邻兄弟选择器</h1>
    <h1>相邻兄弟选择器</h1>
</body>
</html>

posted @ 2021-01-24 09:45  LuckyEight  阅读(133)  评论(0)    收藏  举报