前言:

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

推荐免费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>