在CSS中，选择器用于定位我们想要样式化的网页上的HTML元素。有各种各样的CSS选择器可用，允许在选择要样式化的元素时实现细粒度的精度。在本文及其子文章中，我们将详细介绍不同的类型，了解它们是如何工作的。

1、什么是选择器?

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

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

在CSS中，选择器在CSS选择器规范中定义;就像CSS的其他部分一样，它们需要得到浏览器的支持才能工作。您将遇到的大多数选择器都是在3级选择器规范和4级选择器规范中定义的，它们都是成熟的规范，因此您将发现浏览器对这些选择器的出色支持。

2、选择器列表

如果你有多个东西使用相同的CSS，那么单个选择器可以组合成一个选择器列表( selector list)，这样规则就可以应用到所有的单个选择器上。例如，如果我对h1和.special类使用相同的CSS，我可以将其写为两个单独的规则。

h1 {color: blue;
}.special {color: blue;
}

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

h1, .special {color: blue;
}

逗号之前或之后都可以有空格。如果每个选择器都在新行上，您可能还会发现选择器更具可读性。

h1,
.special {color: blue;
}

当把选择器组合成列表时，如果任何选择器在语法上无效，则将忽略整个规则。

3、选择器的类型

选择器有几种不同的分组，了解您可能需要的选择器类型将帮助您找到适合工作的工具。在本文的子文章中，我们将更详细地研究不同的选择器组。

3.1 Type, class, and ID selectors

这一组包括针对HTML元素(如<h1>)的选择器。

h1 {
}

它还包括针对类的选择器:

.box {
}

或ID:

#unique {
}

3.2 属性选择器

这组选择器为您提供了基于元素上某个属性的存在来选择元素的不同方法:

a[title] {
}

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

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

3.3 伪类和伪元素

这组选择器包括伪类(pseudo-classes)，它们为元素的某些状态设置样式。例如:hover伪类只在鼠标指针悬停在一个元素上时才选择它:

a:hover {
}

它还包括伪元素(pseudo-elements)，它们选择元素的特定部分而不是元素本身。例如，::first-line总是选择元素内文本的第一行(在下面的例子中是<p>)，就好像在第一个格式化行周围加了<span>，然后再选择。

p::first-line {
}

3.4 组合选择器

最后一组选择器结合其他选择器，以定位文档中的元素。例如，下面的代码使用后代组合符(>)选择作为<article>元素的直接子元素的段落:

article > p {
}