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> 元素中出現：

&lt;style type="text/css" media="screen"&gt;


p{ color: red; }


&lt; /style&gt;

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 she et 下找到添加user style的地方（原諒我沒有中文版的IE瀏覽器）。

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

&lt;p class="intro" style="color:red;" &gt;This is a paragraph.&lt; /p&gt;

我們在使用以上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規則在文檔中出現的順序

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