一. 选择器
选择器可以分为以下几类：
- 简单选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
- 组合选择器
- 多用选择器
<1>简单选择器
(1) 标签选择器 span
(2) 类选择器 .
(3) ID选择器 #
(4) 通配符选择器 *
<2> 属性选择器
(1) 存在和值属性选择器
- [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。 eg:
[class] - [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。 eg:
[class=box] - [attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。
(2) 伪正则选择器（子串属性选择器）
- [attr|=val] : 选择attr属性的值以val（包括val）或val-开头的元素（-用来处理语言编码）。
- [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。 eg:
[class^=in] - [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
- [attr*=val] : 选择attr属性的值中包含字符串val的元素。
<3> 伪类选择器
是一个以冒号(:)作为前缀的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，
- :active
- :checked
- :first
- :first-child
- :focus
- :hover
- :last-child
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :visited
<4>伪元素选择器
前缀是两个冒号 (::) —— 同样是添加到选择器后面达到指定某个元素的某个部分。
- ::after
- ::before
- ::first-letter
- ::first-line
- ::selection
- ::backdrop
<5> 组合选择器
<6> 多用选择器
多用选择器（Multiple selectors）：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个 CSS 规则下面， 以将一组声明应用于由这些选择器选择的所有元素。
二. 选择器权重
- 行内样式 +1000
- id +100
- 类选择器 、属性选择器 、伪类选择器 +10
- 标签选择器 、伪元素选择器 +1
- 通配符选择器 0
三. 样式优先级
(1) !important
!important优先级是最高的
(2) 行内、内联、外联优先级
!important > 行内样式 > 内联样式 and 外联样式
注意：
- 内联和外联的优先级是与加载顺序有关的，谁写后面，谁后加载，谁生效！！
(3) 特殊情况
当选中的都不是目标元素时，离目标近的优先/生效
