CSS优先级简记

（一）优先级定义：基于不同种类选择器组成的匹配规则；
（二）作用：浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。
（三）优先级的计算：

1. 多个CSS声明优先级相等的时候，最后的声明才会作用在元素上；
2. 当有多个CSS声明作用在一个元素上时，才会体现出优先级的作用；
3. 当没有CSS声明直接作用于元素上时，元素会从祖先元素上继承某些有继承性的样式声明。

何为层叠？
当向一个元素应用某些值的时候，要考虑声明的继承，特殊性以及来源，此为层叠。

所以我们需要考虑的是：

1. 在同一来源根据选择器的特殊性排列出优先级；
2. 将不同来源的值按照（外联 || 内联 < 行内）进行优先级排序。

（四）选择器的特殊性值
选择器的特殊性值表述为4个部分，用0,0,0,0表示。

1. ID选择器的特殊性值，加0,1,0,0。
2. 类选择器、属性选择器或伪类，加0,0,1,0。
3. 元素和伪元素，加0,0,0,1。
4. 通配选择器*对特殊性没有贡献，即0,0,0,0。
5. 最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

当有多个声明时，使用哪个呢？

1. 计算每个声明的优先级，然后选择特殊性值最高的那个。
2. 如果特殊性值一样，选择最后声明的那个。
3. 特殊性值没有进位，特殊性值1,0,0,0大于以0开头的所有特殊性值，比如0,99,99,99。
4. 通配选择器*的特殊性值是0,0,0,0，而元素通过父元素继承过来的样式是没有特殊性值的，所以，通配选择器定义的规则优先级高于元素继承过来的规则的优先级。
5. 行间样式的特殊性是1,0,0,0。行间样式的优先级比ID选择器优先级高。
6. !important太特殊了，尽量少用。

参考：
https://www.cnblogs.com/wangmeijian/p/4207433.html
https://zhuanlan.zhihu.com/p/31765252
https://juejin.im/post/5afa98bf51882542c832e5ec