1.CSS样式优先级

A : 行内样式
B : ID选择器
C : 类选择器，伪类选择器，属性选择器
D : 元素选择器，伪元素选择器
E : 通配符选择器（*）

样式：行内样式》 id选择器》类选择器 | 伪类 | 属性选择器》标签选择器 | 伪元素选择器》通配符选择器（*）

样式位置：行内样式》 style标签》 link

权重计算规则：

总权重=数量*元素权重
举例:

html body #box .div:hover{
    color:red;
}

(A)行内样式：无
(B)ID选择器：#box
(C)类选择器，伪类选择器：.div,:hover
(D)元素选择器：html,body
(E)通配符选择器：无
总权重：（10000，1001，102，12）===》（0，100，20，2,0）

(1)行内样式权重1000
(2)ID选择器权重100
(3)类选择器，伪类选择器，属性选择器权重10
(4)元素选择器，伪元素选择器权重1
(5)通配符选择器权重0

优先级总结

1.！important 作用于单个样式，如color,width,height等等，权重最大，如果冲突样式也有！important，则按照权重规则比较

2.冲突样式权重相同，后面的覆盖前面的

3.按照分级比较权重，A级与A级比较

举例：

html body #box .div:hover{//(0,100,20,2,0)
    color:red;
}

ul li div #box #txt::before:hover{//(0,200,10,4,0)
    color:green;
}

1号：(0,100,20,2,0)
2号：(0,200,10,4,0)
权重比较规则从左到右逐级比较，同级相比（A级与A级相比，B级与B级相比...）
A级：1号==2号
B级：1号<2号
得出2号权重大于1号

4.行间样式+！important是无敌的

举例：

<div style="width:100px !important;"></div>

没有样式可以覆盖但是可以通过其他的属性限制如：max-width:50px;

5.不能越级比较，无论多少个D级都没有一个C级权重大（老版本浏览器256个C级可以覆盖一个D级（据说，未考证））

注意：权重大的覆盖权重小的，只覆盖冲突的样式，未冲突样式不变

CSS优先级及权重