css优先级

css有四种加载样式的方式：内联、syle标签、link、import。这四种方式均可以影响html的样式。假设你分别用这四种方式定义了一个div的样式，如果你能确定这四种方式修改的内容均不冲突那就再好不过了。但现实往往不是这样的。假如我通过在外部css定义了背景为红色，内联样式中又定义了蓝色，最终的效果是怎样的？这里就存在一个优先级的问题。

使用计数法计算优先级

现在定义一个四位数，给它初始化0 0 0 0，对于css的每一个选择器，使用如下规则：
1.每有一个id选择符，百位+1
2.每有一个class选择符，十位+1
3.每有一个标签元素、伪类，个位+1
4.其它选择符（例如通配符），不变

如果存在样式冲突，对比二者的四位数大小，最终采用较大者。
注：在优先级相同的情况下，后定义的样式优先级更高。

下面来举一些例子

/*存在一个<div id="iDiv" class="cDiv"></div>*/
#iDiv{
    background-color: black;
}
.cDiv{
    background-color: red;
}
/*.iDiv(0 1 0 0)>#cDiv(0 0 1 0) 最终样式为red*/

/*存在一个<div><p>SunnyChuan</p><div>*/
div p{
    color:red;
}
p{
    color:blue;
}
/*前者0 0 0 2,后者0 0 0 1 最终样式为red*/

/*更加复杂*/
#iDiv .cDiv p a:hover{
    margin:0 auto;
    width:100px;
    height:100px;
/*0 1 1 3*/
}

同一文件中的样式优先级可以通过计数法来算出，假设div既有内联又有导入并且二者对某一样式同时定义了呢？css规范指出：内联 > style > 外部导入。此外还需注意，带有!important标识的样式优先级最高并且无视上述所有标准。因此在实际开发中因尽量避免通过important来指定最高优先级而是通过计算进而提升某一样式的优先级。