CSS优先级及权重

65 阅读2分钟

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级(据说,未考证))

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