important > 行内样式 > id > class、伪类、属性选择器 > 元素、伪元素
选择器的特殊性值表述为4个部分，用0,0,0,0表示。
- ID选择器的特殊性值，加0,1,0,0。
- 类选择器、属性选择器或伪类，加0,0,1,0。
- 元素和伪元素，加0,0,0,1。
- 通配选择器*，等其他选择器对特殊性没有贡献，即0,0,0,0。
- 行间样式的特殊性是1,0,0,0。
累加完成后，从左至右对比数值大小，有一项胜出则优先级高。
css样式是从右向左解析的。
提高性能的方式：
- 最右侧的使用类名，解析时遍历范围会比较少。
.box div -->改成 .box .outer
- 使用子选择器，加快解析速度。
.box .outer -->改成 .box > .outer
- 避免样式嵌套过深。
注： 实际css性能不会有太大问题，了解下可以使我们更好的使用css。
a标签伪类的书写顺序是 :link、:visited、:focus、:hover、:active。
规则记忆：遵守爱恨原则LVHA（LoVe HAte）书写顺序，focus在中间的方式。
样式优先级一致时，只与样式的解析顺序有关，与使用样式的顺序无关，demo:
<style>
.yellow {
color: yellow;
}
.blue {
color: blue;
}
</style>
<body>
<span class="yellow blue">我是蓝色的</span><br />
<span class="blue yellow">我也是蓝色的</span>
</body>
以上因为blue样式晚于yellow样式解析，所以其优先级更高。
document.getElementById('box').style.backgroundColor = 'red !important';