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

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

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

元素標籤樣式

style標籤內樣式

link檔案樣式

style.css
h1{color:yellow;}

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

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

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

CSS !important

本日主角來了,假設我們想要讓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 Li 的文章...

推薦文章

發表評論