css有四种加载样式的方式：内联、syle标签、link、import。这四种方式均可以影响html的样式。假设你分别用这四种方式定义了一个div的样式，如果你能确定这四种方式修改的内容均不冲突那就再好不过了。但现实往往不是这样的。假如我通过在外部css定义了背景为红色，内联样式中又定义了蓝色，最终的效果是怎样的？这里就存在一个优先级的问题。 #### 使用计数法计算优先级 现在定义一个四位数，给它初始化0 0 0 0，对于css的每一个选择器，使用如下规则： 1.每有一个id选择符，百位+1 2.每有一个class选择符，十位+1 3.每有一个标签元素、伪类，个位+1 4.其它选择符（例如通配符），不变 如果存在样式冲突，对比二者的四位数大小，最终采用较大者。 注：在优先级相同的情况下，后定义的样式优先级更高。 <br> 下面来举一些例子 ~~~ /*存在一个<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来指定最高优先级而是通过计算进而提升某一样式的优先级。