css 权重

css权重由高到低分别是

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

计算

从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1。

例如：

*{}     ====》0
li{}     ====》1(一个元素)
li:first-line{}     ====》2(一个元素，一个伪元素)
ul li {}        ====》2（两个元素）
ul ol+li{}     ====》3（三个元素）
h1+ *[rel=up]{}     ====》11（一个属性选择器，一个元素）
ul ol li.red{}     ====》13（一个类，三个元素）
li.red.level{}     ====》21（两个类，一个元素）
style=""     ====》1000(一个行内样式)
p {}     ====》1（一个元素）
div p {}     ====》2（两个元素）
.sith {}     ====》10（一个类）
div p.sith{}     ====》12（一个类，两个元素）
#sith{}     ====》100（一个ID选择器）
body #darkside .sith p {} ====》112(1+100+10+1,一个Id选择器，个类，两个元素)

来源：https://www.cnblogs.com/birdofparadise/p/9337430.html