前言：

本文内容：三种基本选择器、层次选择器

推荐免费CSS3基础讲解视频：【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

三种基本选择器

作用：选择页面上的某一类或某一个元素

  • 标签选择器 选择页面上所有同类标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*标签选择器，可以选择页面上所有同类标签*/
            h1{
                color: #b33e3e;
            }
            p{
                font-size: 50px;
            }
        </style>

    </head>
    <body>
    <h1>这是h1标题</h1>
    <h1>这是h1标题</h1>
    <p>标签选择器</p>
    </body>
    </html>

  • 类选择器 格式：.类名{} 选择页面上class相同的标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*类选择器，可以选择页面上class相同的标签 方便归类
            格式：.类名{}  */
            .h1{
                color: #b33e3e;
            }
            p{
                font-size: 50px;
            }
        </style>

    </head>
    <body>
    <h1 class="h1">这是h1标题</h1>
    <h1>这是h1标题</h1>
    <p class="h1">类选择器</p>
    </body>
    </html>

  • ID选择器 格式：#ID值{} 唯一的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*  ID选择器，可以选择页面上ID值的标签
                注意：ID的值是唯一的
                格式：#ID值{}
            */
            .h1{
                color: #b33e3e;
            }
            p{
                font-size: 50px;
            }
            #idh{
                color: #63b86c;
            }
        </style>

    </head>
    <body>
    <h1 class="h1">这是h1标题</h1>
    <h1 id="idh">这是ID选择器</h1>
    <p class="h1">类选择器</p>
    </body>
    </html>

    选择器不遵循就近原则 而是固定的

    ID选择器>class选择器>标签选择器

层次选择器

  • 后代选择器

    1
    2
    3
    4
    /*后代选择器*/
    body p{
        background: pink;
    }

  • 子选择器

    1
    2
    3
    4
    /*子选择器  只有一代*/
    body>p{
        background: #63b86c;
    }

  • 相领兄弟选择器

    1
    2
    3
    4
    /*相领兄弟选择器 只有一个 向下*/
    .active + p{
        background: #b33e3e;
    }

  • 通用选择器

    1
    2
    3
    4
    /*通用兄弟选择器 向下所有*/
    .active~p{
        background: #cba4a4;
    }

简单练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        body p{
            background: pink;
        }
        /*子选择器 只有一代*/
        body>p{
            background: #63b86c;
        }
        /*相领兄弟选择器 只有一个 向下*/
        .active + p{
            background: #b33e3e;
        }
        /*通用兄弟选择器 向下所有*/
        .active~p{
            background: #cba4a4;
        }
    </style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>

</ul>
<p>p7</p>
<p class="active">p8</p>
<p>p9</p>
</body>
</html>