概念
浏覽器是通過判斷優先級，來決定到底哪些屬性值是與元素最相關的，進而應用到該元素上。優先級是由
選擇器組成的比對規則決定的。
如何計算?
優先級是根據由每種選擇器類型構成的級聯字串計算而成的. 它不是一個對應相應比對表達式的權重值.
如果優先級相同,元素最終會應用 CSS 中靠後的聲明.
注意: 在文檔樹中的距離是不會對元素優先級計算産生影響的.（可以看文檔中無視DOM樹中的距離的例子）
優先級順序
下列是一份優先級逐級增加的選擇器清單:
- 通用選擇器
*
- 元素(類型)選擇器
- 類選擇器
- 屬性選擇器
- 僞類
- ID 選擇器
- 内聯樣式
事實上，元素還可以從父元素上繼承一些樣式，如color等屬性。這些繼承的樣式的優先級永遠低于元素本身的樣式，包括通用選擇器：
<div id='test'>
<a href="#">text</a>
</div>
* {
color:red;
}
#test{
color:blue;
最終text的顔色是紅色的。
!important
!important
當
!important
規則被應用在一個樣式聲明中時,該樣式聲明會覆寫CSS中任何其他的聲明, 無論它處在聲明清單中的哪個位置. 盡管如此,
!important
規則還是與優先級毫無關系使用
!important
不是一個好習慣，因為它改變了你樣式表本來的級聯規則，進而難以調試。
一些不成文規則
- 不要在全站範圍的css中使用
!important
- 隻在需要覆寫全站範圍的css或是外部css（例如引用的ExtJs或是YUI）的時候才在指定的頁面上使用
!important
- 不要在你的插件中使用
!important
- 永遠都要優先考慮使用樣式規則的優先級來解決問題而不是
!important
取而代之，你可以:
更好的利用CSS的級聯屬性
更多的使用适合的選擇器。比如在你需要標明的對象元素前加上更多的元素，使選擇的範圍縮小，你的選擇器就變得更有針對性，進而提高優先級：
<div id="test">
<span>Text</span>
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>
想要把原有的綠色文本變成紅色，提升優先級的方式:
#test.a{
color: red !important;<!--盡管這條聲明在前，但是仍會覆寫下邊的樣式-->
a{
color: green !important;
不過
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 http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css :not
: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>
會在螢幕上出現以下結果:
This is in the outer div. (orange)
This text is in the inner div. (lime)
基于類型的優先級
優先級是根據選擇器類型進行計算的. 在下面的例子中,屬性選擇器盡管選擇了一個ID但是在優先級計算法則中還是根據其類型計算 .
有如下樣式聲明:
* #foo {
color: green;
*[id="foo"] {
color: purple;
将其應用在下面的HTML中:
<p id="foo">I am a sample text.</p>
最終會出現下面的效果:
I am a sample text. (green)
因為即使選擇的是相同的元素,但是 ID 選擇器有更高優先級,是以第一條樣式聲明生效.
無視DOM樹中的距離
body h1 {
html h1 {
當它應用在下面的HTML時:
<html>
<body>
<h1>Here is a title!</h1>
</body>
</html>
浏覽器會将它渲染成:
Here is a title! (purple)
相關
- CSS3 Selectors Specificity - http://www.w3.org/TR/selectors/#specificity
- CSS Key Concepts: CSS syntax , specificity and inheritance , the box layout modes visual formatting models , and margin collapsing , or the initial computed used actual values. Definitions of value syntax shorthand properties replaced elements
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)