多重样式优先级:如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。一般情况下,优先级如下:
(内联样式)Inline style >(内部样式)Internal style sheet >(外部样式)External style sheet
有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。
css选择器权重计算方式一:
将特殊性分为4个等级
a.第一等,行内样式,权值为1000
b.第二等,id选择器,权值为100
c.第三等,class选择器,权值10
d.第四等,类型选择器和伪元素选择器,权值为1
通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。
But,这个计算方式其实是有点问题的。。。
正确的计算方式如下所示:
CSS选择器权重计算方式二:
1.A:如果是行内样式,A=1,否则A=0;
2.B:计算该选择器中ID的数量。
3.C:计算该选择器中class、伪类、属性选择器等的数量。
4.D:计算该选择器中伪元素及标签的数量。
计算权重值时,A,B,C,D四组值,从左到右,分组比较。如果A相同,比较B,如果B相同,比较C,如果C相同,比较D,如果D相同,后定义的优先。
举个栗子:样式一:body header div navulli div p a span em {color: red}
样式二:.count {color: blue}
按照计算方法一,样式一的权重值是11,样式二的权重值是10,如果这两条规则用于同一个元素,则该元素应该是红色,实际结果却是蓝色。
CSS 优先级法则:
A 选择器都有一个权值,权值越大越优先;
B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
D 继承的CSS 样式优先级低于后来指定的CSS 样式;
E 在同一组属性设置中标有“!important”规则的优先级最大。