CSS 选择器

学习如何定位特定的 HTML 元素进行样式设置。

什么是 CSS 选择器？

CSS 选择器是用来选中或“找到”你想要设置样式的 HTML 元素的模式。它们是任何 CSS 规则中至关重要的第一部分。

你可以根据元素的标签名、ID、类、属性、与其他元素的关系等来选择元素。

最简单的选择器根据 HTML 标签名来定位元素。

例如，要选择页面上所有的 <p>（段落）元素并使它们变为红色和居中：

/* 选择所有段落元素 */
p {
  color: red;
  text-align: center;
}

ID 选择器使用 HTML 元素的 id 属性来定位 一个特定的 元素。

元素的 id 在整个 HTML 文档中必须是唯一的。当你需要为单个、独特的元素设置样式时，此选择器是理想的选择。

要选择具有特定 ID 的元素，请在 ID 名称前加上井号 (#) 字符。

此规则定位 id="intro-paragraph" 的 HTML 元素：

/* 选择 id="intro-paragraph" 的元素 */
#intro-paragraph {
  font-size: 1.2em;
  color: navy;
}

重要提示：ID 名称不能以数字开头，并且理想情况下不应包含空格（应使用连字符或下划线代替）。虽然现代浏览器可能比较宽松，但遵循此规则可确保最大的兼容性。

类选择器根据元素的 class 属性值来定位元素。

与 ID 不同，同一个类可以应用于多个元素，并且单个元素可以拥有多个类（在 HTML 属性中用空格分隔）。这使得类在应用可重用样式方面非常灵活。

要选择具有特定类的元素，请在类名称前加上点号 (.) 字符。

此规则定位所有 class="highlight" 的 HTML 元素，并为其提供黄色背景：

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

你还可以通过将类选择器与元素选择器结合使用，使其更具体。此规则仅定位同时具有 class="highlight" 的 <p> 元素：

/* 仅选择具有 class="highlight" 的 <p> 元素 */
p.highlight {
  background-color: lightyellow;
  border: 1px dashed orange;
}

重要提示：与 ID 名称一样，类名称不应以数字开头。它们在 HTML 和 CSS 中区分大小写。

如果多个元素共享完全相同的样式声明，你可以将它们的选择器组合在一起，以编写更简洁的 CSS。

而不是写成：

h1 {
  text-align: center;
  color: blue;
}

h2 {
  text-align: center;
  color: blue;
}

.section-title {
  text-align: center;
  color: blue;
}

你可以通过用逗号分隔选择器来分组它们：

/* 选择 h1, h2 以及具有 class="section-title" 的元素 */
h1, h2, .section-title {
  text-align: center;
  color: blue;
}

这使你的 CSS 更简洁，也更容易维护，因为你只需要在一个地方更改样式。

这些是最基本的选择器。CSS 提供了许多更强大的选择器（如属性选择器、伪类和伪元素），这些将在其他章节中介绍。