CSS 选择器

CSS 选择器是一种匹配 HTML 文档中元素的模式。关联的样式规则应用于与选择器模式匹配的元素。

什么是选择器

选择器是 CSS 最重要的方面之一，因为它们用于选择网页上的元素，以便对它们进行样式设置。你可以通过各种方式定义选择器。

通用选择器

通用选择器（写为 * 星号）匹配页面上的每个元素。如果目标元素上存在其他条件，则可以省略通用选择器。此选择器通常用于从元素中删除默认边距和填充，以便快速进行测试。

* {
    margin: 0;
    padding: 0;
}

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

注意： 建议不要在生产环境中使用通用选择器 *，因为此选择器会匹配页面上的每个元素，这会给浏览器带来太多不必要的压力。

元素类型选择器

元素类型选择器将文档树中元素的每个实例与相应的元素类型名称相匹配。

p {
    color: blue;
}

p 选择器内的样式规则将应用于 <p> 文档中的每个元素，并将其着色为蓝色，而不管它们在文档树中的位置如何。

Id 选择器

id 选择器用于定义单个或 唯一元素的样式规则。

id 选择器定义为哈希符号（#）后跟 id 值。

#error {
    color: red;
}

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

类选择器

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

类选择器定义为句点符号（.）后面紧跟类值。

.blue {
    color: blue;
}

上述样式规则将文档中 class 属性设置为的每个元素的蓝色文本呈现为蓝色 blue 。你可以把它变得更加特别。例如：

p.blue {
    color: blue;
}

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

后代选择器

当你需要选择另一个元素的后代元素时，可以使用这些选择器。例如，如果你只想定位无序列表中包含的那些锚点，而不是定位所有锚元素。

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

选择器内的样式规则 ul.menu li a 仅应用于那些 <a> 等锚元素，它们包含在具有 .menu 类的无序列表内的，并且对文档内的其他链接没有影响。同样，h1 em 选择器内的样式规则仅应用于包含内部 <h1> 标题的 <em> 元素。

子选择器

子选择器可用于仅选择那些元素的直接子元素。子选择器由两个或多个由大于符号（即 >） 分隔的选择器组成。例如，你可以使用这些选择器来选择具有多个级别的嵌套列表中的第一级列表元素。

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

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

相邻的兄弟选择器

相邻的兄弟选择器可用于选择兄弟元素。此选择器的语法如下：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），但它不那么严格。一般的兄弟选择器由两个由 tilde（∼）字符分隔的简单选择器组成。它可以写成：E1~E2，其中 E2 是选择器的目标。

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

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

有更多的选择器，如属性选择器，伪类，伪元素。我们将在接下来的章节中讨论这些选择器。

分组选择器

样式表中的几个选择器通常共享相同的样式规则声明。你可以将它们分组为以逗号分隔的列表，以最小化样式表中的代码。它还可以防止你反复重复相同的样式规则。

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;
}