本文将详细讲解 CSS 中的一大重要知识点，选择器。
在 CSS 中，选择器用于定位我们想要样式化的网页 HTML 元素。各种各样可用的 CSS 选择器允许我们精确选择要样式化的元素。
选择器分类
- 简单选择器：通过元素类型、class 或 id 匹配一个或多个元素。
- 属性选择器：通过 属性 / 属性值 匹配一个或多个元素。
- 伪类：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是 DOM 树中一父节点的第一个子节点。
- 伪元素：匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
- 组合器：以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs的直系子节点的段落，或者直接跟在 headings 后面的段落。
- 多重选择器：将以逗号分隔开的多个选择器放在一个 CSS 规则下面， 以将一组声明应用于由这些选择器选择的所有元素。
简单选择器
简单选择器基于元素的类型（或其 class或 id）直接匹配文档的一个或多个元素。
类型选择器（元素选择器）
此选择器只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。这是选择所有指定类型的最简单方式。
类选择器
类选择器由一个点“.”以及类后面的类名组成。类名是在 HTML class 文档元素属性中没有空格的任何值。由你自己选择一个名字。同样值得一提的是，文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)。
ID 选择器
ID 选择器由哈希/磅符号（#）组成，后面是给定元素的 ID 名称。 任何元素都可以使用 id 属性设置唯一的 ID 名称。 由你自己选择的 ID 是什么。 这是选择单个元素的最有效的方式。
注意： 一个 ID 名称必须在文件中是唯一的。关于重复ID的行为是不可预测的，比如在一些浏览器只是第一个实例计算，其余的将被忽略。
通用选择器
通用选择（*）是最终的王牌。它允许选择在一个页面中的所有元素。由于给每个元素应用同样的规则几乎没有什么实际价值，更常见的做法是与其他选择器结合使用。
注意： 使用通用选择时小心。因为它适用于所有的元素，在大型网页利用它可以对性能有明显的影响：网页可以显示比预期要慢。大多数情况下，不要使用这个选择器。
属性选择器
属性选择器是一种特殊类型的选择器，它根据元素的 属性 和属性值来匹配元素。它们的通用语法由方括号 ([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。 属性选择器可以根据其匹配属性值的方式分为两类： 存在和值属性选择器和子串值属性选择器。
存在和值（Presence and value）属性选择器
这些属性选择器尝试匹配精确的属性值：
[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。
子串值（Substring value）属性选择器
这种情况的属性选择器也被称为“伪正则选择器”，因为它们提供类似正则的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式）：
[attr|=val]：选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。[attr^=val]：选择attr属性的值以 val 开头（包括 val）的元素。[attr$=val]：选择attr属性的值以 val 结尾（包括 val）的元素。[attr*=val]：选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）。
伪类
一个 CSS 伪类（pseudo-class） 是一个以冒号（:）作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。如：
:link:visited:hover:active
更多请参考 CSS 伪类
伪元素
伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字，但这次伪元素前缀是两个冒号 (::) ， 同样是添加到选择器后面去选择某个元素的某个部分。如：
::after::before::first-letter
更多请参考 CSS 伪元素
组合器
虽然一次使用一个选择器就很有用，但在某些情形中却可能效率低下。 CSS 选择器在你开始组合他们进行细粒度选择的时候变得更具使用价值。基于元素之间的相互关联关系，CSS 提供了几种方法来对元素进行选择。下表使用连接符展示了这些关联关系（A 和 B 代表前文所述的任意选择器）:
| 组合 | 选择结果 |
|---|---|
| A , B | 匹配满足 A（和/或）B 的任意元素 |
| A B | 后代选择器：匹配任意元素，满足条件：B 是 A 的后代结点（B 是 A 的子节点，或者 A 的子节点的子节点） |
| A > B | 子选择器：匹配任意元素，满足条件：B 是 A 的直接子节点 |
| A + B | 相邻兄弟选择器：匹配任意元素，满足条件：B 是 A 的下一个兄弟节点（AB 有相同的父结点，并且 B 紧跟在 A 的后面） |
| A ~ B | 普通兄弟选择器：匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB 有相同的父节点，B 在 A 之后，但不一定是紧挨着 A） |
多重选择器
通过相互间用逗号分隔的多个选择器所形成的组，可以一次性将同一规则同时应用到多组选定元素。