选择器

# 1 什么是选择器

选择器的主要作用就是从一堆元素中选出特定的符合要求的元素

更多的选择器, 参考css选择器手册 (opens new window)

比如, 上图中有一堆小黄人, 现在需要统一改变单眼小黄人的颜色为红色, 该如何操作呢?

第一步: 选出所有的单眼小黄人
第二步: 修改颜色为红色

CSS的思想也是类似的

第一步: 通过选择器, 找出符合要求的HTML元素(选元素)
第二步: 修改找出来的元素的属性(改属性)

常见的选择器包括

元素选择器
类选择器
id选择器

# 2 基本选择器

# 1) 元素选择器

作用

根据标签名, 将同一种标签元素选择出来

语法

标签名 {
 属性: 值
}

1
2
3

示例

修改所有p标签的颜色为红色

p*3>lorem10

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    将所有p标签的颜色改为红色
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima,
      consequuntur.
    </p>
    <p>
      Facere, earum eum voluptates explicabo aut tempora eveniet voluptate. Eos!
    </p>
    <p>
      Fugit cupiditate ea doloremque quidem obcaecati. Rerum quam explicabo
      quod.
    </p>
  </body>
</html>

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

# 2) 类选择器

作用

选择某一类元素, 该元素通过class属性指定

语法

.类名 {
	属性: 值
}

1
2
3

示例

div*5>lorem3

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>类选择器</title>
    <style>
      .red {
        color: red;
      }
      .blue {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div>Lorem, ipsum dolor.</div>
    <div class="red">Facere, possimus laboriosam.</div>
    <div class="blue">Ducimus, ea perferendis!</div>
    <div class="red">Accusamus, accusantium dolores.</div>
    <div>Eius, eaque magni.</div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

多类名使用空格隔开

lei

# 3) id选择器

作用

选择某一个元素, 该元素通过id属性指定

语法

#id名 {
	属性: 值
}

1
2
3

示例

<p id="username"></p>

# 练习

实现'Google'图标

提示

使用span让多个元素在同一行排列
使用class类选择器
使用color定义颜色
使用font-size:100px指定大小

答案

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        font-size: 100px;
      }

      .red {
        color: red;
      }
      .blue {
        color: blue;
      }
      .yellow {
        color: yellow;
      }
      .green {
        color: green;
      }
    </style>
  </head>
  <body>
    <div>
      <span class="blue">G</span>
      <span class="red">o</span>
      <span class="yellow">o</span>
      <span class="blue">g</span>
      <span class="green">l</span>
      <span class="red">e</span>
    </div>
  </body>
</html>

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

# 方法

更多选择器的用法, 查手册CSS手册 (opens new window)

# 3 复合选择器

# 1) 后代选择器

作用

选择某一个元素的子孙后代, 使用空格

语法

父选择器 子选择器 {
	属性: 值
}

1
2
3

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      nav li {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 主导航 -->
    <nav>
      <ul>
        <li>Lorem.</li>
        <li>Nobis!</li>
        <li>Exercitationem?</li>
        <li>Voluptas.</li>
        <li>Nulla!</li>
      </ul>
    </nav>

    <!-- 新闻列表 -->
    <ul>
      <li>Lorem.</li>
      <li>Magni!</li>
      <li>Sed?</li>
    </ul>
  </body>
</html>

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

# 2) 并集选择器

作用

同时选择多个选择器, 使用逗号

语法

选择器1, 选择器2 {
	属性: 值
}

1
2
3

# 3) 交集选择器

作用

同时满足条件

语法

选择器1选择器2 {
	属性: 值
}

1
2
3

现在有这样一个需求

h1和p都是应用的同一个类表示强调, 但是我们希望h1的强调是红色, p的强调是蓝色

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1.import {
        color: red;
      }
      p.import {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1 class="import">Lorem.</h1>
    <p class="import">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit
      molestias, odio doloremque ab neque numquam animi, ipsum qui natus aut
      dignissimos quo nobis sequi architecto nemo tempore cum ipsa possimus!
    </p>
  </body>
</html>

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

# 4) a元素的伪类选择器

作用

选择同一元素的不同状态

语法

a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */

书写顺序: lvha, 爱恨法则, love & hate

示例

a {   
  font-weight: 700;
  font-size: 16px;
  color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
	color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

1
2
3
4
5
6
7
8

# 5) 自学

属性选择器
子代选择器
兄弟选择器

# 练习

<!-- 主导航栏 -->
<nav class="top-nav">
  <ul>
    <li><a href="#">公司首页</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>
<!-- 侧导航栏 -->
<aside class="side-nav">
  <div class="left">左侧侧导航栏</div>
  <div class="right"><a href="#">登录</a></div>
</aside>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在不修改以上结构代码的前提下，完成以下任务：

链接登录的颜色为红色
鼠标经过登录时颜色为蓝色
主导航栏里面的所有的链接改为橙色

如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~

上次更新: 2021/09/03, 15:32:17

← CSS简介文本相关属性→