#书摘 #css #前端
《CSS 选择器世界》2.4 CSS选择器的优先级
本节介绍每一个级联层中的CSS属性的优先级，这主要是由CSS选择器的优先级决定的。
2.4.1 同等级CSS优先级规则概览
每一个级联层中的CSS优先级也有明显的不可跨越的等级，我们将其划分为0～4共5个等级，其中前4个等级由CSS选择器决定，最后一个等级由书写形式决定。下面对这5个等级分别进行讲解。

（1）0级：通配选择器、选择符和逻辑组合伪类。其中，通配选择器写作星号(*)。示例如下：
* { color: #000; }​​



- 选择符指空格、>、+、~和||。关于选择符的更多知识参见第5章。
- 逻辑组合伪类有:not()、:is()和:where()等，这些伪类本身并不影响CSS优先级，影响优先级的是括号内的选择器（:where()比较特殊，括号内参数的优先级永远是0）。示例如下：
为0～4共5个等级，其中前4个等级由CSS
需要注意的是，只有逻辑组合伪类的优先级是0级，其他伪类的优先级并非如此。

（2） 1级：标签选择器。示例如下：
body { color: #333; }​​


（3） 2级：类选择器、属性选择器和伪类。示例如下：
.foo { color: #666; }
[foo] { color: #666; }
:hover { color: #333; }​​



（4） 3级：ID选择器。示例如下：
#foo { color: #999; }​​



（5） 4级：style属性内联。示例如下：
<span style="color: #ccc;">优先级</span>​​



其中，style属性内联具有高优先级很好理解，而前面0～3级的选择器部分相对复杂得多，也重要得多，因为前端通常所说的CSS优先级其实指的就是CSS选择器的优先级。甚至可以说，掌握了CSS选择器的优先级等同于掌握了完整的CSS优先级规则。