CSS 选择器

在本教程中，您将学习如何使用 CSS 选择器将样式规则应用于元素。

什么是选择器？

CSS 选择器是一种匹配网页元素的模式。与该选择器关联的样式规则将应用于匹配选择器模式的元素。

选择器是 CSS 最重要的方面之一，因为它们允许您以各种方式定位网页上的特定元素，以便对其进行样式设置。

CSS 中有几种类型的选择器，让我们仔细看看：

通用选择器

用星号 (*) 表示的通用选择器匹配页面上的每一个元素。

如果元素上存在其他条件，则可以省略通用选择器。此选择器通常用于从元素中删除默认边距和填充，以便快速测试。

让我们试试下面的例子来了解它的基本工作原理：

* {
    margin: 0;
    padding: 0;
}

* 选择器中的样式规则将应用于文档中的每个元素。

元素类型选择器

元素类型选择器将文档中元素的所有实例与相应的元素类型名称匹配。 让我们尝试一个例子来看看它是如何工作的：

p {
    color: blue;
}

p 选择器中的样式规则将应用于文档中的每个 <p> 元素（或段落）并将其涂成蓝色，无论它们在文档中的位置如何 树。

ID 选择器

id 选择器用于定义 single 或 unique 元素的样式规则。

id 选择器是用一个井号 (#) 定义的，后面紧跟 id 值。

#error {
    color: red;
}

此样式规则将元素的文本呈现为红色，其 id 属性设置为 error。

类选择器

类选择器可用于选择任何具有 class 属性的 HTML 元素。 所有具有该类的元素都将根据定义的规则进行格式化。

类选择器由句号 (.) 定义，后跟类值。

.blue {
    color: blue;
}

上述样式规则将文档中 class 属性设置为 blue 的每个元素的文本呈现为蓝色。 你可以让它更具体一点。 例如：

p.blue {
    color: blue;
}

选择器 p.blue 内的样式规则仅将那些 <p> 元素的文本呈现为蓝色，其中 class 属性设置为 < code>blue，对其他段落没有影响。

后代选择器

当您需要选择一个元素是另一个元素的后代时，您可以使用这些选择器，例如，如果您只想定位无序列表中包含的锚点，而不是定位所有锚点元素。 让我们看看它是如何工作的：

ul.menu li a {
    text-decoration: none;
}
h1 em {
    color: green;
}

选择器 ul.menu li a 中的样式规则仅适用于包含在具有类 .menu 的 <ul> 元素中的那些 <a> 元素，并且对文档中的其他链接没有影响。

同样，h1 em 选择器中的样式规则将仅应用于包含在 <h1> 元素中的那些 <em> 元素，而不会影响其他 <em> 元素。

子选择器

子选择器用于仅选择作为某个元素的直接子元素的那些元素。

子选择器由两个或多个选择器组成，由大于号 (>) 分隔。 例如，您可以使用此选择器来选择具有多个级别的嵌套列表中的第一级列表元素。 让我们看一个例子来了解它是如何工作的：

ul > li {
    list-style: square;
}
ul > li ol {
    list-style: none;
}

选择器 ul > li 中的样式规则仅适用于作为 <ul> 元素的直接子元素的 <li> 元素，对其他列表元素没有影响。

相邻兄弟选择器

相邻的兄弟选择器可用于选择兄弟元素（即同一级别的元素）。 此选择器的语法如下：E1 + E2，其中 E2 是选择器的目标。

以下示例中的选择器 h1 + p 仅当两个 <h1> 和 <p> 元素在文档树中共享相同的父元素并且 <h1> 紧接在 <p> 元素之前时，才会选择 <p> 元素。 这意味着只有紧跟在每个 <h1> 标题之后的那些段落才会有相关的样式规则。 让我们看看这个选择器实际上是如何工作的：

h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}

通用兄弟选择器

一般兄弟选择器类似于相邻兄弟选择器（E1 + E2），但不那么严格。 一个通用的同级选择器由两个简单的选择器组成，由波浪号 (∼) 字符分隔。 它可以写成：E1 ∼ E2，其中 E2 是选择器的目标。

下面示例中的选择器 h1 ∼ p 将选择 <h1> 元素之前的所有 <p> 元素，其中所有元素在文档树中共享相同的父元素。

h1 ∼ p {
    color: blue;
    font-size: 18px;
}
ul.task ∼ p {
    color: #f0f;
    text-indent: 30px;
}

还有更复杂的选择器，例如 属性选择器、伪类、< a href="css-pseudo-elements.asp">伪元素。 我们将在接下来的章节中详细讨论这些选择器。

分组选择器

通常样式表中的多个选择器共享相同的样式规则声明。 您可以将它们分组到一个逗号分隔的列表中，以最小化样式表中的代码。 它还可以防止您一遍又一遍地重复相同的样式规则。 让我们来看看：

h1 {
    font-size: 36px;
    font-weight: normal;
}
h2 {
    font-size: 28px;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}

正如您在上面的示例中看到的，相同的样式规则 font-weight: normal; 由选择器 h1, h2 和 h3 共享，因此可以将其分组在逗号分隔的列表中，如下所示：

h1, h2, h3 {
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}