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將根據優先順序演算法來確定最終選用的值。