1. Particularity
Let's first look at what will happen in this example:
| Here is the code snippet: .grape { color:Blue; }H1 { color: Red; }<h1 class="grape">Meerkat <em>Central</em></h1> |
Both H1 and .grape match the H1 element above, so which one should I use?
Practice has proved that .grape is the correct answer, showing the sentence in blue.
According to the specification, general HTML element selectors (H1, P, etc.) have particularity 1, class selectors have particularity 10, and ID selectors have particularity 100. The larger the value, the greater the weight, and it is preferred.
| Here is the code snippet: H1 { color: Red; } P EM { color: Blue; } .grape { color: Fuchsia; } P.bright { color: Yellow; } P.bright EM.dark{ color: Gray; } # ID01 { color: Red; } |
2. Inheritance
In the framework of specificity, the inherited value has specificity 0, which means that any explicitly declared rule will override its inheritance style, no matter how high the weight of the rule.
| Here is the code snippet: H1#ID01 { color: Red; } EM{ color: Gray; } <H1 ID="ID01>Meerkat <EM><Central</EM></H1> |
Although the ID selector has the highest speciality, because under the speciality framework, the inherited value is only speciality 0, so some Centrals will be displayed in Gray color.
3. STYLE elements
There is also a sytle element with a weight of 100 defined in CSS, although the ID selection is the same, in fact the style element has a higher specificity than the ID.
| Here is the code snippet: #ID01 EM{ color: Gray; } <H1 ID="ID01">Meerkat <EM style="color: red;">Central</EM>!</H1> |
will be displayed in red color.
4. Importance (!important)
!important has the highest specificity, say 1000, so the !important rule will override the content of the inline STYLE attribute.
| Here is the code snippet: H1{ color: red !important; } <H1 style="color:black;">Meerkat Central!</H1> |
will appear in RED color. a special case
| 以下是代码片段： P#warn { color: Red !important; } EM { color: Black; } <p id="warn">This text is red, but <em>emphasized text is black.</em></p> |
Although !important is defined as the highest specificity, the sentences are not all displayed in RED, why? Maybe we have to look back at the previous rules and mention in the second point of inheritance above that "in the framework of specificity, the inheritance value has only specificity 0." Therefore, even if !important is defined, the specificity in inheritance is only 0. So it appears as an EM rule with a specificity of 1.
权重顺序为：继承 => HTML普通选择符 => 类选择符 =>style元素 => !important
5、层叠
1) 若两条规则具有相同的权值、起源及特殊性，那在样式表中最后出现的规则优先。
2) 任何位于文档中的规则都比引入的规则优先。
更理论一些的文章：
本文向大家描述一下CSS执行顺序与优先权的问题，首先就是CSS规则的specificity(特殊性)，CSS2.1有一套关于specificity的计算方式，用一个四位的数字串(CSS2是三位)来表示，最终specificity越高的规则越特殊，在优先级判定时也就越有优势。
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，然后在比较取舍时按照从左到右的顺序逐位比较。
举一些例子吧：
ExampleSourceCode
h1{color:red;}
bodyh1{color:green;}
——后者胜出
h2.grape{color:purple;}
h2{color:silver;}
——前者胜出
html>bodytabletr[id="totals"]tdul>li{color:maroon;}
li#answer{color:navy;}
——后者胜
除了specificity还有一些其他规则
文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<divstyle=”color:red”>blah</div>的样式，而外部定义指经由<link>或<style>标签定义的规则。
有!important声明的规则高于一切。
如果!important声明冲突，则比较优先权。
如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
由继承而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。
关于经由@import载入的外部样式，由于@import必须出现在所有其他规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。
这里需要提一下IE，IE是可以识别位置错误的@import的，但无论@import在什么地方，它都认为是位于所有其他规则定义之前的，这可能会引发一些误会。所以优先权问题虽然看起来简单，但其背后还是有蛮复杂的机制的，需要多多留意。