CSS 选择器

选择器是 CSS 的核心。它们是用来“选择”或“定位”你想要应用样式的 HTML 元素的模式。掌握了选择器，你就能精确地控制页面上任何一个元素的样式。

基础选择器

1. 元素选择器 (Element Selector)

也称为类型选择器，它会选择指定类型的所有 HTML 元素。

/* 选择页面上所有的 <p> 元素 */
p {
  color: gray;
}

2. 类选择器 (Class Selector)

类选择器会选择所有带有特定 class 属性的元素。它以一个点 (.) 开头。

<p class="highlight">这是一个高亮的段落。</p>
<div class="highlight">这是一个高亮的 div。</div>

/* 选择所有 class="highlight" 的元素 */
.highlight {
  background-color: yellow;
}

一个元素可以有多个类，用空格隔开，例如 class="highlight important"。

3. ID 选择器 (ID Selector)

ID 选择器会选择一个带有特定 id 属性的元素。它以一个井号 (#) 开头。在一个 HTML 文档中，每个 id 必须是唯一的。

<div id="main-content">...</div>

/* 选择 id="main-content" 的元素 */
#main-content {
  border: 1px solid black;
}

由于其唯一性，ID 选择器的特殊性（优先级）非常高。

4. 属性选择器 (Attribute Selector)

属性选择器会选择所有带有特定属性或属性值的元素。它使用方括号 ([])。

/* 选择所有带有 target="_blank" 属性的 <a> 元素 */
a[target="_blank"] {
  color: red;
}

/* 选择所有带有 title 属性的元素 */
[title] {
  cursor: help;
}

5. 通用选择器 (Universal Selector)

通用选择器是一个星号 (*)，它会选择页面上的所有元素。它通常用于设置全局的样式重置。

/* 将所有元素的内外边距都设置为 0 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 一个常见的全局设置 */
}

分组选择器 (Grouping Selector)

如果你想为多个不同的选择器应用相同的样式，可以用逗号 (,) 将它们分组，以减少代码重复。

/* 将 h1, h2, h3 的颜色都设置为蓝色 */
h1, h2, h3 {
  color: blue;
}

这比分开写要简洁得多：

/* 不推荐的写法 */
h1 {
  color: blue;
}
h2 {
  color: blue;
}
h3 {
  color: blue;
}

掌握这些基础选择器是学习 CSS 的第一步。在后续的章节中，我们还会学习更高级的选择器，如组合选择符、伪类和伪元素，它们能让你进行更复杂、更精确的元素选择。