css样式优先级

多重样式优先级：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下：

（内联样式）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”规则的优先级最大。