css权重由高到低分别是
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
计算
从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选择器，个类，两个元素)