首页 CSS

# CSS 选择器进阶

# 后代选择器：空格

  • 作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素
  • 选择器语法：选择器 1 选择器 2 (css)
    • 这里的选择器可以是类，id, 标签选择器
  • 结果 :
    • 在选择器 1 所找到标签的后代 (儿子，孙子，重孙子…) 中，找到满足选择器 2 的标签，设置样式
  • 注意点 :
    1. 后代包括：儿子，孙子，重孙子…
    2. 后代选择器中，选择器与选择器之间通过空格隔开
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>
    <style>
        div {
            background-color: pink;
            width: 900px;
            height: 900px;
        }

        div div {
            background-color: grey;
            width: 600px;
            height: 600px;
        }

        div span {
            background-color: blue;
            width: 300px;
            height: 300px;
        }

        div div div {
            background-color: red;
        }


    </style>
</head>
<body>
<!--后代 : 儿子, 孙子, 重孙子-->

    <p>这是一个p标签</p>
    <div>
        <p>这是一个div标签的儿子标签,这是一个p标签</p>
        <span>这是一个div标签的儿子标签, 这是一个span标签</span>
        <div>这是一个div标签的儿子标签, 这是一个div标签</div>
        <div>
            <div>这是一个div标签的孙子标签, 是另一个div标签的儿子标签, 这是一个div标签</div>
        </div>
    </div>
</body>
</html>

效果 :

image-20220228122221042

# 子代选择器 : >

  • 作用：根据 HTML 标签的嵌套关系，选择父元素 == 子代中满足条件的元素
  • 选择器语法：选择器 1 > 选择器 2 (css)
  • 结果 :
    • 在选择器 1 所找到的标签的自带 (儿子) 中，找到满足选择器 2 的标签，设置样式
  • 注意点 :
    1. 子代只包括儿子
    2. 子代选择器中，选择器与选择器之间通过 “>” 隔开
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器后代(>)</title>
    <style>
    /*空格查询子代方法*/
    /*div a {*/
    /*    text-decoration: none;*/
    /*}*/

    /*>符号查询子代方法*/
    div > a {
        text-decoration: none;
    }
    </style>
</head>
<body>
    <div>
        我是div标签
        <a href="#">我是div标签里的a标签</a>
        <p><a href="#">我是div标签里的p标签里的a标签</a></p>
    </div>
</body>
</html>

# 两种选择器比较

# 空格子代选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器后代(>)</title>
    <style>
    /*空格查询子代方法*/
    div a {
        text-decoration: none;
    }
      
    </style>
</head>
<body>
    <div>
        我是div标签
        <a href="#">我是div标签里的a标签</a>
        <p><a href="#">我是div标签里的p标签里的a标签</a></p>
    </div>
</body>
</html>

效果 :

image-20220228123016003

# 大于符号子代选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器后代(>)</title>
    <style>
    div > a {
        text-decoration: none;
    }
    </style>
</head>
<body>
    <div>
        我是div标签
        <a href="#">我是div标签里的a标签</a>
        <p><a href="#">我是div标签里的p标签里的a标签</a></p>
    </div>
</body>
</html>

效果 :

image-20220228123138415

# 并集选择器 : ,

  • 作用：同时选择多组标签，设置相同的格式
  • 选择器语法：选择器 1 , 选择器 2 (css)
  • 结果 :
    • 找到选择器 1 和选择器 2 选中的标签，设置样式
  • 注意点 :
    1. 并集选择器中的魅族选择器之间通过，分隔
    2. 并集选择器中的魅族选择器可以是基础选择器或者复合选择器
    3. 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style>
        div, p, span, h1 {
            color: red;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>ppp</p>
    <span>span</span>
    <h1>h1</h1>
</body>
</html>

image-20220228123555330

# 交集选择器 : .

  • 作用：选中页面中同时满足多个选择器的标签
  • 选择器语法：选择器 1. 选择器 2 (css)
  • 结果 :
    • (既又原则) 找到页面中既能被选择器 1 选中，又能被选择器 2 选中的标签，设置样式
  • 注意点 :
    1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔
    2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style>
        /*.box {*/
        /*    color: red;*/
        /*}*/

        p.box {
            color: red;
        }
    </style>
</head>
<body>
    <p class="box">我是一个p标签 : box</p>
    <p>我也是一个p标签</p>
    <div class="box">我是一个div标签 : box</div>
</body>
</html>

image-20220228124509381

# hover 伪类选择器

  • 作用：选中鼠标悬停在元素上的状态，设置样式
  • 选择器语法：选择器:hover (css)
  • 注意点 :
    1. 伪类选择器中的元素的某种状态
    2. 任何标签都可以添加伪类
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover伪类选择器</title>
    <style>
        /*鼠标悬停时字体颜色变为红色*/
        a:hover {
            color: red;
        }

        div {
            color: yellow;
            background-color: red;
            width: 200px;
            height: 200px;
        }

        div:hover {
            color: green;
            background-color: blue;
            width: 250px;
            height: 250px;
        }
    </style>
</head>
<body>
    <a href="#">我是a标签</a>

    <div>我是div标签</div>
</body>
</html>

# emmet 语法

  • 作用：通过简写语法，快速生成代码

  • 语法 :

    • 类似于刚刚学习的选择器的写法

    • 记忆示例效果
      标签名div
      类选择器.red
      id 选择器#one

      交集选择器p.red#one<p class=“red” id=“one”

      子代选择器ul>li
      内部文本ul>li
      • 我是 li 的内容
      创建多个ul>li*3
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>emmet语法</title>
</head>
<body>
    <div></div>
    <h1></h1>

<!--    div.box生成box类的div标签-->
    <div class="box"></div>

<!--    div#one生成one id的div标签-->
    <div id="one"></div>

<!--    div.box#one 生成id为one box类的div标签-->
    <div class="box" id="one"></div>

<!--    ul>li生成带li子代的ul列表-->
    <ul>
        <li></li>
    </ul>

<!--    ul>li{我是li内容}生成带li内容的ul列表-->
    <ul>
        <li>我是li的内容</li>
    </ul>

<!--    p{$}*5生成5个p带增长数字的标签-->
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</body>
</html>