5. CSS 选择器（上）

本节目标：掌握最常用的五种选择器，能准确选中想设置样式的元素。

选择器是什么

选择器就是 CSS 的「瞄准器」。它告诉浏览器：这条样式规则用在哪些元素上。

本章先学五种基础选择器，下一章再学组合器、伪类等高级用法。

元素选择器

元素选择器直接用标签名，会选中页面中所有该类型的元素：

p {
  color: #333;
  font-size: 16px;
}

上面这段代码会让页面中所有 <p> 标签的文字变成深灰色。

<p>这个段落会生效</p>
<p>这个也会生效</p>
<span>这个不会生效</span>

元素选择器简单粗暴，适合统一设置某类标签的基准样式。

类选择器

类选择器以点号 . 开头，选中所有带有对应 class 属性的元素：

.highlight {
  background-color: yellow;
  padding: 2px 4px;
}

<p>普通段落</p>
<p class="highlight">高亮段落</p>
<span class="highlight">高亮文字</span>

类选择器的优势是可复用。同一个 class 可以用在任意多个元素上，不同标签也能共享同一个类。

Tip

类选择器是 CSS 中使用最频繁的选择器。建议优先用类来控制样式，而不是标签或 ID。

多类选择

一个元素可以同时拥有多个类，用空格分隔：

<p class="text-large text-red">又大又红的文字</p>

.text-large {
  font-size: 24px;
}
.text-red {
  color: red;
}

两个类的样式会同时作用于这个元素。

标签+类组合

还可以把标签名和类名组合起来，更精确地选择：

/* 只选中 class="center" 的 <p> 标签 */
p.center {
  text-align: center;
}

这样 .center 类的样式只会作用于 <p> 标签，不会影响其他标签。

ID 选择器

ID 选择器以井号 # 开头，选中页面中唯一的一个元素：

#main-header {
  height: 60px;
  background-color: #2c3e50;
  color: white;
}

<header id="main-header">网站头部</header>

ID 在页面中只能出现一次，这是 HTML 规范的要求。所以 ID 选择器适合选页面中独一无二的元素，比如导航栏、页脚、主内容区。

Note

ID 选择器优先级比类选择器高。但现代 CSS 开发更推荐用类，因为类可复用、优先级低，更好维护。

ID 命名注意

不能以数字开头（#1header 无效）
区分大小写
同一个 ID 在同一页面只能出现一次

通配符选择器

星号 * 代表「所有元素」：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

上面这段代码会把页面中每个元素的外边距和内边距清零。很多项目用它来做 CSS Reset（样式重置）。

Note

通配符选择器会影响所有元素，性能开销较大。尽量避免在大范围或频繁渲染的场景使用。

分组选择器

多个选择器如果要用同样的样式，可以用逗号 , 把它们组合在一起：

/* 分开写 */
h1 {
  text-align: center;
  color: navy;
}
h2 {
  text-align: center;
  color: navy;
}
p {
  text-align: center;
  color: navy;
}

/* 分组写：效果完全一样 */
h1, h2, p {
  text-align: center;
  color: navy;
}

分组选择器的好处是减少重复代码，让样式表更简洁。

五种选择器速查

选择器	符号	示例	选中目标
元素选择器	标签名	`p`	所有 `<p>` 元素
类选择器	`.`	`.active`	所有 `class="active"` 的元素
ID 选择器	`#`	`#nav`	`id="nav"` 的唯一元素
通配符	`*`	`*`	所有元素
分组选择器	`,`	`h1, h2, p`	所有被列出的选择器

完整示例

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>选择器示例</title>
  <style>
    /* 通配符：重置所有元素 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* 元素选择器：所有段落基础样式 */
    p {
      font-size: 16px;
      line-height: 1.6;
      color: #333;
    }

    /* ID 选择器：页面头部 */
    #header {
      background: #2c3e50;
      color: white;
      padding: 20px;
    }

    /* 类选择器：高亮文本 */
    .highlight {
      background: yellow;
    }

    /* 类选择器：大号文字 */
    .large {
      font-size: 20px;
    }

    /* 分组选择器：标题居中 */
    h1, h2 {
      text-align: center;
      margin-bottom: 16px;
    }
  </style>
</head>
<body>
  <div id="header">
    <h1>我的网站</h1>
  </div>
  <h2>欢迎</h2>
  <p>这是一个普通段落。</p>
  <p class="highlight">这个段落被高亮了。</p>
  <p class="large highlight">这个又大又亮。</p>
</body>
</html>

学完这章你应该知道

元素选择器选所有同类标签
类选择器最灵活，可复用，优先使用
ID 选择器选唯一的元素，少用
通配符选所有元素，常用于样式重置
分组选择器用逗号组合，减少重复代码

下一章学组合器选择器，包括后代、子、相邻兄弟等关系选择器。