CSS !important 宣告css指令的優先度

2015-02-25

4481

當一個網頁內有好幾個css樣式時，難免會出現重複名稱的問題，而有時又有某個樣式特別重要。這時我們就可以使用!important來讓此樣式擁有更高的優先權。

一般來說，CSS的優先順序是元素標籤樣式 > style標籤內樣式 > link檔案樣式

<h1 style="color: red;"></h1>

1	<h1 style="color: red;"></h1>

<style>
h1{color:blue;}
</style>

<style>

h1{color:blue;}

</style>

style.css
h1{color:yellow;}

除了上面介紹的優先順序外，越後面的樣式也有較高的優先權，例如:

style.css
h1{color:yellow;}
h1{color:dark;}

這時h1會呈現dark的顏色。因為越後面的樣式，有更高的優先權，所以第一個h1{color:yellow}被第二個h1{color:dark;}給覆蓋掉了!!

本日主角來了，假設我們想要讓h1保持是黃色的話，那我們可以將 h1{color:yellow;} 改成h1{color:yellow !important;}，這樣就可以讓我們的h1的顏色保持為黃色了!!如下範例:

style.css
h1{color:yellow !important;}
h1{color:dark;}

因為有添加!important所以此時的h1會呈現黃色。

但如果有多個!important的話，優先順序則會依造原本的優先權來做排序，例如:

style.css
h1{color:yellow !important;}
h1{color:dark; !important;}

那這時h1又變成dark顏色了

很快的又到了萬惡的總結的部分，今天的總結論要說甚麼呢??當然還是得噓一下IE才行啦~~
據傳說IE6根本不理會!important，但我相信IE6總有一天會消失的…(堅信)

以前查看別人的css看到!important還一直以為它是代表不重要的意思，真的是誤會大了哈哈哈

Aidec Li

學我所見，寫我所學。凡事略懂略懂~~

很抱歉，此文章關閉留言

AIDEC SpaceX