概念
浏覽器是通過判斷優先級,來決定到底哪些屬性值是與元素最相關的,從而應用到該元素上。優先級是由選擇器組成的匹配規則決定的。
如何計算?
優先級是根據由每種選擇器類型構成的級聯字串計算而成的. 它不是一個對應相應匹配表達式的權重值.
如果優先級相同,元素最終會應用 CSS 中靠後的聲明.
注意: 在文檔樹中的距離是不會對元素優先級計算產生影響的.(可以看文檔中無視DOM樹中的距離的例子)
優先級順序
下列是一份優先級逐級增加的選擇器列表:
通用選擇器*
元素(類型)選擇器
類選擇器
屬性選擇器
偽類
ID 選擇器
內聯樣式
事實上,元素還可以從父元素上繼承一些樣式,如color等屬性。這些繼承的樣式的優先級永遠低於元素本身的樣式,包括通用選擇器:
最終text的顏色是紅色的。
!important 規則是例外
當!important 規則被應用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其他的聲明, 無論它處在聲明列表中的哪個位置. 盡管如此, !important規則還是與優先級毫無關系使用!important不是一個好習慣,因為它改變了你樣式表本來的級聯規則,從而難以調試。
一些不成文規則
不要在全站范圍的css中使用!important.
只在需要覆蓋全站范圍的css或是外部css(例如引用的ExtJs或是YUI)的時候才在指定的頁面上使用 !important。
不要在你的插件中使用!important。
永遠都要優先考慮使用樣式規則的優先級來解決問題而不是 !important。
取而代之,你可以:
更好的利用CSS的級聯屬性
更多的使用適合的選擇器。比如在你需要選定的對象元素前加上更多的元素,使選擇的范圍縮小,你的選擇器就變得更有針對性,從而提高優先級:
代碼如下:
無論你css語句的順序是什麼樣的,文本都會是綠色的(green)因為這一條規則是最有特殊性、優先級最高的。(同理,無論語句順序怎樣,藍色(blue)的規則都會覆蓋紅色(red)的規則)
什麼時候應該使用:
A) 一種情況
你的網站上有一個設定了全站樣式的CSS文件,同時你(或是你同事)寫了一些效果通常都是很差的行內樣式(行內樣式的優先級是最高的)。
在這種情況下,你就可以在你全局的CSS文件中寫一些!important的樣式來覆蓋掉那些直接寫在元素上的行內樣式。
活生生的例子比如:有人在jQuery插件裡寫了糟糕的行內樣式。
B) 另一種情況
代碼如下:
在外層有 #someElement 的情況下,你怎樣能使 awesome 的段落變成紅色呢?這種情況下,如果不使用!important,第一條規則永遠比第二條的優先級更高。
怎樣覆蓋掉 !important
很簡單,你只需要再加一條 !important 的CSS語句,將其應用到更高優先級的選擇器(在原有基礎上添加額外的標簽、class或id選擇器)上;或是保持選擇器一樣,但添加的位置需要在原有聲明的後面(優先級相同的情況下,後邊定義的會覆蓋前邊定義的)。
代碼如下:
想要把原有的綠色文本變成紅色,提升優先級的方式:
代碼如下:
不過