https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
概念
瀏覽器是通過判斷優先級，來決定到底哪些屬性值是與元素最相關的，從而應用到該元素上。優先級是由選擇器組成的匹配規則決定的。
如何計算?
優先級是根據由每種選擇器類型構成的級聯字串計算而成的. 它不是一個對應相應匹配表達式的權重值.
如果優先級相同,元素最終會應用 CSS 中靠後的聲明.
注意: 在文檔樹中的距離是不會對元素優先級計算產生影響的.（可以看文檔中無視DOM樹中的距離的例子）
優先級順序
下列是一份優先級逐級增加的選擇器列表:
通用選擇器（*）
元素(類型)選擇器
類選擇器
屬性選擇器
僞類
ID 選擇器
內聯樣式
!important 規則是例外
當 !important 規則被應用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其他的聲明, 無論它處在聲明列表中的哪個位置. 儘管如此, !important規則還是與優先級毫無關係.使用 !important不是一個好習慣，因爲它改變了你樣式表本來的級聯規則，從而難以調試。
Some rules of thumb
Never 永遠不要在全站範圍的 css 上使用
!importantOnly 只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁面中使用
!importantNever 永遠不要在你的插件中使用
!importantAlways 要優化考慮使用樣式規則的優先級來解決問題而不是
!important
取而代之，你可以:
更好的利用 CSS 的級聯屬性
使用更多具體的規則。比如在你需要選定的對象元素前加上更多的元素，使選擇的範圍縮小，你的選擇器就變得更有針對性，從而提高優先級：
<div id="test"> <span>Text</span></div>
div#test span { color: green }
span { color: red }
div span { color: blue }無論你css語句的順序是什麼樣的，文本都會是綠色的(green)因爲這一條規則是最有特殊性、優先級最高的。（同理，無論語句順序怎樣，藍色(blue)的規則都會覆蓋紅色(red)的規則）
什麼時候應該使用：
A) 一種情況
你的網站上有一個設定了全站樣式的CSS文件，
同時你（或是你同事）寫了一些效果通常都是很差的行內樣式（行內樣式的優先級是最高的）。
在這種情況下，你就可以在你全局的CSS文件中寫一些!important的樣式來覆蓋掉那些直接寫在元素上的行內樣式。
活生生的例子比如：有人在jQuery插件裏寫了糟糕的行內樣式。
B) 另一種情況
#someElement p {
color: blue;
}
p.awesome {
color: red;
}
在外層有 #someElement 的情況下，你怎樣能使 awesome 的段落變成紅色呢？這種情況下，如果不使用!important，第一條規則永遠比第二條的優先級更高。
怎樣覆蓋掉 !important
很簡單，你只需要再加一條 !important 的CSS語句，將其應用到更高優先級的選擇器（在原有基礎上添加額外的標籤、class或id選擇器）上；或是保持選擇器一樣，但添加的位置需要在原有聲明的後面（優先級相同的情況下，後邊定義的會覆蓋前邊定義的）。
<div>
<a href="#" id="test">text</a>
</div>
想要把原有的綠色文本變成紅色，提升優先級的方式:
#test.a{
color: red !important;<!--儘管這條聲明在前，但是仍會覆蓋下邊的樣式-->
}
a{
color: green !important;
}
在現有:
a{
color: green !important;
}
a{ color: red !important;<!--同樣的選擇器，後邊的聲明會覆蓋前邊的-->}
更多關於important的帖子:
http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css
http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean
http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css
http://stackoverflow.com/questions/11178673/how-to-override-important
:not 僞類例外
:not 否定僞類在優先級計算中不會被看作是僞類. 儘管如此, 在計算選擇器數量時還是會把僞類當做普通選擇器進行計數.
這是一塊CSS代碼:
div.outer p {
color:orange;
}
div:not(.outer) p {
color: lime;
}當它被應用在下面的HTML時:
<div class="outer"> <p>This is in the outer div.</p> <div class="inner"> <p>This text is in the inner div.</p> </div> </div>
會在屏幕上出現以下結果:
This is in the outer div.
This text is in the inner div.
基於類型的優先級
優先級是根據選擇器類型進行計算的. 在下面的例子中,屬性選擇器儘管選擇了一個ID但是在優先級計算法則中還是根據其類型計算 .
有如下樣式聲明:
* #foo {
color: green;
}
*[id="foo"] {
color: purple;
}將其應用在下面的HTML中:
<p id="foo">I am a sample text.</p>
最終會出現下面的效果:
I am a sample text.
因爲即使選擇的是相同的元素,但是 ID 選擇器有更高優先級,所以第一條樣式聲明生效.
無視DOM樹中的距離
有如下樣式聲明:
body h1 {
color: green;
}
html h1 {
color: purple;
}當它應用在下面的HTML時:
<html> <body> <h1>Here is a title!</h1> </body> </html>
瀏覽器會將它渲染成:
Here is a title!
相關
CSS3 Selectors Specificity - http://www.w3.org/TR/selectors/#specificity
CSS Key Concepts: CSS syntax, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or theinitial, computed, used and actual values. Definitions of value syntax, shorthand properties and replaced elements.