CSS执行顺序与优先权的问题

　　CSS执行顺序与优先权的问题其实便是一个 摩擦解决的问题，当同一个元素(或内容)被CSS 取舍符选中时，就要依照优先权取舍不同的CSS 规定，这其中 波及到的问题其实众多 。

　　首先便是CSS 规定的specificity(特别性)，CSS2.1有一套对于specificity的计算 模式，用一个四位的数字串(CSS2是三位)来 示意，最后specificity越高的 规定越特别，在优先级 断定时也就越有优势 。对于specificity的具体计算在各种状况下的数字加成有如下一般 规定：

　　每个ID 取舍符(#someid)，加 0,1,0,0 。

　　每个class 取舍符(.someclass)、每个属性 取舍符(形如[attr=”"]等)、每个伪类(形如:hover等)加0,0,1,0

　　每个元素或伪元素(:firstchild)等，加0,0,0,1

　　 其余 取舍符包含全局 取舍符*，加0,0,0,0 。相当于没加，不过这也是一种specificity，后面会解释 。
　　按这些 规定将数字串逐位相加，就得到最后计算得的specificity， 而后在 比较取舍时依照从左到右的顺序逐位 比较 。

　　举一些例子吧：

h1 {color: red;} 
/* 惟独一个一般元素加成， 后果是 0,0,0,1 */
body h1 {color: green;} 
/* 两个一般元素加成， 后果是 0,0,0,2 */ ——后者胜出       
h2.grape {color: purple;}
/* 一个一般元素、一个class 取舍符加成， 后果是 0,0,1,1*/
h2 {color: silver;} 
/*一个一般元素， 后果是 0,0,0,1 */ ——前者胜出       
html > body table tr[id=”totals”] td ul > li {color: maroon;} 
/* 7个一般元素、一个属性 取舍符、两个 其余 取舍符， 后果是0,0,1,7 */
li#answer {color: navy;} 

/* 一个ID 取舍符，一个一般 取舍符， 后果是0,1,0,1 */ ——后者胜出 
除了specificity还有一些 其余 规定

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

　　有!important申明的 规定高于 所有 。
　　假如!important申明 摩擦，则 比较优先权 。

　　假如优先权一样，则依照在源码中浮现的顺序决定，后来者居上 。

　　由继承而得到的 款式没有specificity的计算，它低于 所有 其余 规定( 比方全局 取舍符*定义的 规定) 。

对于经由@import载入的外部 款式，因为@import必须浮现在全部 其余 规定定义之前(如不是，则阅读器应该 忽略之)，所以依照 后来居上 准则，一般优先权 摩擦时是占下风的 。

　　这里需求提一下IE，IE是 可以 鉴别位置 舛误的@import的，但无论@import在什么地方，它都认为是位于全部 其余 规定定义之前的，这可能会激发一些误会 。
　　所以优先权问题 固然看起来 方便，但其背后还是有蛮复杂的机制的，需求多多 留神 。