css的选择器位于css声明块前
选择器可以分为以下类别：
- 简单选择器
Simple selectors: 通过元素类型、class或id匹配一个或多个元素。 - 属性选择器
Attribute Selectors: 通过属性/属性值匹配一个或多个元素。 - 伪类
Pseudo-classes: 匹配处于确定状态的一个或多个元素， 比如被鼠标悬停的元素。或被当前选中或未选中的复选框， 或者是DOM树中的一个父节点的第一个子节点。 - 伪元素
Pseudo-elsments: 匹配处于相关的确定位置的一个或多个元素， 例如每个段落的第一个字，或者某个元素之前生成的内容。 - 组合器
Combinators: 以有效的方式组合两个或以上的选择器用于非常特定的方法。 例如，你可以只选择divs的直系子节点的段落， 或者直接跟在headding后面的段落。 - 多用选择器
Multiple selectors: 以逗号分隔开的多个选择器放在一个css规则下面， 将一组声明应用于这些选择器的所有元素。
简单选择器
1. 类型选择器（又名： 元素选择器）
此选择器只是一个选择器名和指定HTML元素名的不区分大小写的匹配。这是选择所有指定类型的最简单方式。
2. 类选择器（Class selectors）
类选择器由一个点 ”.“和类后面的类名组成。类名是在HTML class文档元素中没有空格的任何值。文档中的多个元素可以具有相同的类名， 而单个元素可以有多个类名（以空格分开多个类名的形式书写）。
3. ID选择器
ID选择器由哈希/磅符号（#）组成， 后面是给定元素ID名称。 任何元素都可以使用id属性设置唯一的ID名称。ID选择器是选择单个元素最有效的方式。
注意： 一个ID名称必须在一个文件中是唯一的。关于重复ID的行为是不可预测的， 比如在一些浏览器只是第一个实例计算， 其余的将被忽略。
4. 通用选择器（Universal selectors）
通用选择器（*）是最终的王牌。 它允许选择一个页面中的所有元素。 由于给每个元素应用相同规则几乎没有什么实际价值， 更常见的做法是与其他选择器结合使用。
5. 组合器（Combinators）
在css中，组合器允许将多个选择器结合使用，这允许在其他元素中选择元素， 或者与其他元素相邻，如下：
| Combinators | Select |
|---|---|
| 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） |
注： 相邻兄弟选择器和通用兄弟选择器只会”向后“选择， DOM结构靠前的兄弟元素不在选择范围内。
属性选择器
属性选择器是一种特殊类型的选择器， 它根据元素的属性和属性值类匹配元素。 它们的通用语法由方括号（[]）组成， 其中包含属性名称， 后跟可选条件以匹配属性的值。属性选择器可以根据其匹配属性值的方式分为两类：
1. 存在和值（Presence and value）属性选择器
这些属性选择器尝试匹配精确的属性值：
- [attr]: 该选择器选择包含 attr 属性的所有元素， 不论attr的值为何。
- [attr=val]: 该选择器仅选择 attr 属性被赋值为val的所有元素。
- [attr~=val]: 该选择器仅选择 attr属性的值（以空格间隔出多个值）中包含val值得所有元素， 比如被空格分隔的多个类（class）中的一个类、
2. 子串值（Substring value）属性选择器
这种情况的属性选择器也被称为”伪正则选择器“， 因为他们提供以 regular expression 的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式）： - [attr|=val]: 选择attr属性以val(包括val)或以val-开头的元素 （-用来处理语言编码)
- [attr^val]: 选择attr属性的值以val开头(包括val)的元素
- [attr$=val]: 选择attr属性的值以val结尾（包括val）的元素
- [attr*=val]: 选择attr属性的值中包含字符串val的元素
伪类和伪元素
1.伪类（Pseudo-class）
一个css伪类是以一个冒号（:）作为前缀的关键字， 当你希望在特定状态下才被呈现到指定元素时， 可以在元素选择器后面加上对应的伪类（pseude-class）。你可能希望某个元素在处于某种状态下呈现另一种样式。例如当鼠标悬停在元素上面时，或者当一个checkbox被禁用或被勾选时，又或者当一个元素是它在DOM数中父元素的第一个孩子元素时。
:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
"lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
2.伪元素
伪元素（Pseudo-element）跟伪类很像， 但它们又有不同的地方。它们都是关键字，但这次伪元素前缀是两个冒号（::）,同样是添加到选择器后面达到指定某个元素的某个部分。书写上：伪元素最大程度可使用双冒号，伪类使用单冒号。
运用上：每个选择器最多只能使用一个伪元素，每个选择器可以使用多个伪类；
::after
::before
::first-letter
::first-line
::selection
::backdrop
