CSS 选择器

CSS 选择器是 CSS 规则的第一部分。它是一种元素和其他术语的模式，告诉浏览器哪些 HTML 元素应该被选中，以便规则内的 CSS 属性值应用于它们。由选择器选择的元素或元素被称为选择器的主题。

在其他文章中，您可能已经遇到了一些不同的选择器，并了解到有一些选择器以不同的方式定位文档——例如，通过选择 h1 之类的元素，或 .special 之类的类。

在 CSS 中，选择器在 CSS 选择器规范中定义；与 CSS 的任何其他部分一样，它们需要在浏览器中得到支持才能正常工作。您将遇到的大多数选择器都在 级别 3 选择器规范 和 级别 4 选择器规范 中定义，它们都是成熟的规范，因此您会发现这些选择器具有极佳的浏览器支持。

如果您有多个使用相同 CSS 的元素，那么可以将各个选择器组合成选择器列表，以便将规则应用于所有各个选择器。例如，如果我的 h1 和 .special 类具有相同的 CSS，我可以将其写成两个独立的规则。

h1 {
  color: blue;
}

.special {
  color: blue;
}

我也可以通过在它们之间添加逗号来将它们组合成选择器列表。

h1, .special {
  color: blue;
}

逗号之前或之后允许使用空格。如果每个选择器都在新的一行上，您也会发现选择器更容易阅读。

h1,
.special {
  color: blue;
}

在下面的实时示例中，尝试组合具有相同声明的两个选择器。组合它们之后，视觉显示应该相同。

当您以这种方式组合选择器时，如果任何选择器在语法上无效，则整个规则将被忽略。

在下面的示例中，无效的类选择器规则将被忽略，而 h1 仍然会应用样式。

h1 {
  color: blue;
}

..special {
  color: blue;
}

但是，当它们组合在一起时，h1 和类都不会应用样式，因为整个规则被认为是无效的。

h1, ..special {
  color: blue;
}

选择器可以分为几个不同的组别，了解你需要哪种类型的选择器将有助于你找到合适的工具。在本篇文章的子文章中，我们将更详细地介绍不同组别的选择器。

类型选择器针对的是 HTML 元素，例如 <h1>

h1 {
}

类选择器针对的是具有特定 class 属性值的元素。

.box {
}

ID 选择器针对的是具有特定 id 属性值的元素。

#unique {
}

这组选择器提供了多种方法来根据元素上是否存在某个属性来选择元素。

a[title] {
}

或者甚至根据是否存在具有特定值的属性来进行选择。

a[href="https://example.com"]
{
}

这组选择器包括伪类，它们对元素的某些状态进行样式化。例如，:hover 伪类仅在鼠标指针悬停在元素上时才会选择该元素。

a:hover {
}

它还包括伪元素，它们选择元素的特定部分，而不是元素本身。例如，::first-line 始终选择元素（以下情况下的 <p>）中的第一行文本，就像在第一行格式化文本周围包裹了一个 <span>，然后对其进行选择一样。

p::first-line {
}

最后一组选择器将其他选择器组合起来，以便在我们的文档中定位元素。例如，以下代码使用子选择器 (>) 选择作为 <article> 元素的直接子元素的段落。

article > p {
}

在这篇文章中，我们介绍了 CSS 选择器，它们可以让你定位特定的 HTML 元素。接下来，我们将更详细地介绍 类型选择器、类选择器和 ID 选择器。

有关选择器的完整列表，请参阅我们的 CSS 选择器参考。

• 概述：CSS 构建块
• 下一步