CSS 选择器基础

选择器是 CSS 规则的第一部分，它告诉浏览器”给哪些元素应用样式”。CSS 提供了一套丰富的选择器语法，让你能精准选中任意元素。

类型选择器（Type Selector）

直接使用 HTML 标签名，选中所有该类型的元素：

css

p {
  line-height: 1.75;
}

h2 {
  color: #1e293b;
}

img {
  max-width: 100%;
}

类选择器（Class Selector）

以 . 开头，选中所有 class 属性包含指定值的元素。这是最常用的选择器：

css

/* 选中 class="highlight" 的所有元素 */
.highlight {
  background: #eff6ff;
  border-left: 4px solid #2563eb;
}

/* 选中 class="btn" 的所有元素 */
.btn {
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
}

一个元素可以有多个 class，用空格分隔：

html

<p class="highlight important">这条文字同时有两个类</p>

ID 选择器（ID Selector）

以 # 开头，选中 id 属性为指定值的唯一元素：

css

/* 选中 id="main-title" 的元素 */
#main-title {
  font-size: 2.5rem;
}

ID 选择器的优先级极高，会让后续覆盖变得困难。在绝大多数情况下，应优先使用 class 选择器。ID 更常用于页面内锚点导航和 JavaScript 定位。

通配选择器（Universal Selector）

* 选中页面上的所有元素：

css

/* 清除所有元素的默认外边距和内边距 */
* {
  margin: 0;
  padding: 0;
}

通配选择器常出现在 CSS reset 中，用于统一各浏览器的默认样式。它的性能开销在现代浏览器中已微乎其微，是一种便捷且广泛使用的方式。如果你需要更精细的控制，也可以选择针对性重置（如 body, h1, h2, p { margin: 0; }）。

属性选择器（Attribute Selector）

根据元素的属性来匹配。有几种匹配方式：

语法	匹配条件	示例
`[attr]`	存在该属性	`[disabled]`
`[attr=value]`	属性值完全等于	`[type="submit"]`
`[attr^=value]`	属性值以 value 开头	`[href^="https"]`
`[attr$=value]`	属性值以 value 结尾	`[href$=".pdf"]`
`[attr*=value]`	属性值包含 value	`[class*="card"]`

css

/* 所有包含 disabled 属性的元素 */
[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* type="submit" 的 input */
input[type="submit"] {
  background: #2563eb;
  color: white;
}

/* href 以 https 开头的链接 */
a[href^="https"]::after {
  content: " ↗";
  font-size: 0.8em;
}

/* 链接到 PDF 文件的 */
a[href$=".pdf"]::after {
  content: " (PDF)";
  font-size: 0.8em;
  color: #64748b;
}

分组选择器

用逗号 , 将多个选择器合并：

css

h1, h2, h3, h4, h5, h6 {
  font-family: 'Georgia', serif;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

等价于分别写了六条规则。

选择器使用建议

推荐度	选择器	原因
首选	class 选择器	灵活、可复用、优先级适中
可用	类型选择器	适合全局基础样式（如 body、h1、p）
可用	属性选择器	适合动态状态（如 `[disabled]`、`[data-active]`）
少用	ID 选择器	优先级过高，破坏级联
可用	通配选择器	便捷全局重置，现代浏览器性能影响可忽略

这些是最基础的选择器。CSS 还提供了组合选择器（后代、子代、兄弟）和伪类/伪元素选择器，分别在组合选择器和伪类与伪元素章节中讲解。