關於CSS的規則優先級

      在CSS中,如果某個元素可以匹配中多條樣式規則時,如何判定使用哪一條規則,這就是一個優先級問題?

      帶着這個問題,在Google中找到下面這篇web,對上面的問題,做了一番解釋。現在轉貼於下,作爲了解的起點。


      CSS規則層疊時的優先級算法


CSS 規則的優先級是Web前端開發人員必須理解的一個概念,我們常用的添加樣式的方法有4種。

inline style

embeded style

external style

user style

inline style是醜陋的,它們穿梭在HTML文檔中,與HTML元素扭成一團,給Web前端開發人員造成了許多麻煩。它們往往以這樣的面目出現:

<p style="color:red;">This is a paragraph.< /p>

 embeded style比inline style紳士一些,它們也寄宿在HTML文檔中,但是它們不屑於與HTML元素扭成一團。它們往往在 < style> 元素中出現:

<style type="text/css" media="screen">
p{ color: red; }
< /style>

 external style是個貴族,它不願意同HTML呆在一起,所以乾脆以外部文件的形式獨立存在。通常我們使用 < link> 元素或者@import語句將它們導入HTML。

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

 我們應當儘可能使用external style,我想理由有很多,大家都知道,我也就不重複了。

還 有一種user style與以上三者略有不同,如果你使用IE瀏覽器,那麼你可以在Tools – Internet Options – General – Appearance – Accessibility – User style sheet 下找到添加user style的地方(原諒我沒有中文版的IE瀏覽器)。

既然我們有如此多的添加style的方法,那麼難以避免樣式會產生層疊。如:

<p class="intro" style="color:red;">This is a paragraph.< /p>

 我們在使用以上inline style的同時,又在我們的external style中使用了:

p{ color: yellow; } 

 我們甚至還在擁有 class="intro" 的 < p> 元素上應用了:

p.intro{ color: blue; } 
 

這樣我們就 在同一元素的同一屬性 color 上,擁有多條CSS規則指定了值 。這種情況被稱爲層疊(Cascading)。當層疊發生時,CSS Parser將根據優先級算法來確定最終選用的值。

優先級算法按照先後順序考慮以下三個方面:

CSS規則的重要性和來源

CSS規則的特殊性

CSS規則在文檔中出現的順序

算法過程分爲4步:

1、針對某一元素的某一屬性,列出所有給該屬性指定值的CSS規則。如上例中,在 class="intro" 的 < p> 元素上,有三條CSS規則指定了 color 屬性。

2、根據聲明的重要性和來源進行優先級排序

重要性有兩種:

important

normal(即非important)

在CSS規則後添加 !important 的重要性要高於沒有添加的。

來源有三種:

user agent stylesheet – 瀏覽器默認樣式

author stylesheet – 開發人員定義的樣式

user stylesheet – 用戶在瀏覽器中定義樣式

重要性和來源的優先級排序從低到高是:
 
user agent stylesheet

user style sheets中的normal規則

author style sheets中的important規則

user style sheets中的important規則

經過以上排序,如果有一條CSS規則的優先級高於其他所有競爭規則,那麼算法結束,返回該最高優先級指定的值。如果有多條CSS規則具有最高優先級,那麼它們將要繼續競爭下去,算法將進入第3步。

3、按照特殊性(Specificity)排序

CSS將計算多條規則中指定每一規則的selector的特殊性值,該值越高,優先級越高。

特殊性值是一個由4個整數組成的一個類似數組的值:a,b,c,d,其中a的權重最高,依次類推,d的權重最低。selector特殊性值的計算方法是:

如果該規則是一條inline style,那麼a = 1

如果該規則由selector指定,selector中出現的id selector的數量就是b的值

e.g.
#AA{
color:blue;
} 

 優先級高於

.test{
color:red;
}
 

如果該規則由selector指定,selector中出現的屬性selector(包括class selector)或者僞類selector的數量總和就是c的值!

如果該規則由selector指定,selector中出現的元素selector或者是僞元素selector的數量總和就是d的值。 

universal selector * 的特殊性值爲0,0,0,0

官方網站 提供了一些例子可以加深理解。

在根據特殊性值排序時,由於a的權重最高,因此首先比較a,在a相同的情況,在比較b,依次類推。因此不論b,c,d值有多大,inline style總是具有最高的特殊性。

如果根據以上特殊性排序後,有一條CSS規則的優先級高於其他所有競爭規則,那麼算法結束,返回該最高優先級指定的值。如果有多條CSS規則具有最高優先級,那麼它們將要繼續競爭下去,算法將進入第4步。

4、比較CSS規則在文檔中出現的順序

出現在後的總是比出現在前的具有更高的優先級,因此出現在最後的那條語句將被作爲該屬性的值。

 

 

      對於其中的按照特殊性(Specificity)排序,下面的web做了一些更具體的示例,包括圖示解釋,可以幫助理解。

      關於CSS Selector的優先級


      如果要了解更多,首先可以從CSS的官網上尋找:

      http://www.w3.org/Style/CSS/

發佈了96 篇原創文章 · 獲贊 1 · 訪問量 8061
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章