css优先级机制

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

 

1、important >（内联样式）Inline style  >（内部样式）Internal style sheet >（外部样式）External style sheet

(有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。)

2、CSS选择器优先级：id选择器优先级 > 类class选择器优先级 > 标签选择器优先级

1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式，而外部定义指经由<link>或<style>卷标定义的规则。 

2、有!important声明的规则高于一切。

3、如果!important声明冲突，则比较优先权。

4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。

5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

6、关于经由@import加载的外部样式，由于@import必须出现在所有其它规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。

选择器

• 标签名选择器，如：p{}，即直接使用HTML标签作为选择器。
• 类选择器，如.polaris{}。
• ID选择器，如#polaris{}。

扩展选择器

• 后代选择器，如.polaris span img{}，后代选贼器实际上是使用多个选择器加上中间的空格来找到具体的要控制标签。
• 群组选择器，如div,span,img{}，群组选择器实际上是对CSS的一种简化写法，只不过把有相同定义的不同选择器放在一起，省了很多代码。

 

后代选择器的定位原则

     浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。后代选择器越接近目标元素，优先级越高。

 

在css中，如果在同一个css块中写下两个同样的属性，那么其实是按照最下面的来执行的，比如说： 

.home{ 

     margin-left:20px; 

     margin-left:40px; 

} 

那么在执行的时候其实是按照40px来执行的，!important的出现就是为了让用户自己设置被执行语句的优先级。如果把上面的语句改为： 

.home{ 

     margin-left:20px!important; 

     margin-left:40px; 

} 

那么在火狐、google浏览器以及IE7以上版本下将会按照20px来执行，而在IE6下却仍然按照40px来执行，因为IE6并不支持!important规范

 

简洁、高效的CSS,让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误：

• 不要在ID选择器前使用标签名 ,因为ID选择器是唯一的，加上div反而增加不必要的匹配。
• 尽量少使用层级关系,使用class代替层级关系