自動目錄
網頁的前端工程師非常頭痛的事，就是同時要處理 IE和 FF等不同的瀏覽器，更糟的是 IE 又分成了 6 7 8 9 10 11 12 ....不同版本，同樣的 CSS在不同的browser或是同browser不同版本中，竟會差異天攘之別，這才是煩人。
好了，來說說 css 中 !important 的意義。
css 中 !important 的意義
有人是這樣寫的：
看得懂的browser 會處理 !important 的css，不看懂的browser 會忽略。IE一直都不支持這個語法，而其他的瀏覽器都支持。我們就可以利用這一點來分別給IE和其它瀏覽器不同的樣式定義。(x)
!important 前面是給Firefox看的 (x)
其實上面的錯在於沒有把!important 意義搞清楚，先來看以下範例：
1. 都沒使用 !important，在這種情況下，第二個p會覆寫第一個p，所以是紅色。
#example p { color: blue; }
#example p { color: red; }
2. 一個使用 !important，因為第一個有!important，所以有更高的優先權，所以會是藍色。
#example p { color: blue !important; }
#example p { color: red; }
3. 二個都使用 !important，同1，第二個p覆寫了第一個p，所以是紅色。
#example p { color: blue !important; }
#example p { color: red !important; }
4. 利用 !important 覆寫 style，如下範例，所以是藍色。
CSS:
#example p { color: blue !important; }HTML:
<div id="example"> <p style="color:green;">This paragraph has an inline style</p> </div>
5. 利用 !important 強制鎖定型別，如下範例，所以是綠色。
CSS:
#example p { color: blue !important; }HTML:
<div id="example"> <p style="color:green !important;">This paragraph has an inline style</p> </div>
6. 以上基本上出現的結果會和我說的一樣，除了IE6 & 7以外，各版本的IE表現：
Internet Explorer 6 會採用最後一個宣告的屬性，根本不理會 !important，所以範例2 只有IE6,7會是紅色 ，所以我原本都誤會 !important 是程式語言的 NOT important 不重要的意思，事實上反而是相反的意思：
!important 是「更重要」的意思，對新的browser來說，是最高優先的意思；對不支援!important的browser 而言，會忽略無作用。
IE7 必需要宣告 doctype 才會正常顯示。
IE8 就比較正常了。
其他說明
1. !important 是跟著每個屬性設定，所以要在屬性中：
color: #123456 !important; <== ○ 正確寫法指定覆寫
color: #123456 ; !important; <== x 錯誤寫法，覆寫不會生效
2. 類別中有多個屬性，每個屬性都要覆寫，就每個屬性值都要有 !important
.classname { color:#123456; background:#987654 !important; } <== 指定覆寫background，color 不受影響
.classname { color:#123456 !important; background:#987654 !important; } <== 指定覆寫background、color
3. 除非你很清楚知道你在覆寫什麼東西，不然少用!important，因為他有可能導致你查錯困難。
4. CSS的權重：
有!important的 element style(設定在tag中的style) > 有!important的css > element style(設定在tag中的style) > css後寫的 > css先寫的
延伸閱讀
參考資料
[1] [CSS]!important讓IE 與 Firefox 分別定義 http://www.minwt.com/?p=83
[2] Using !important with CSS http://www.electrictoolbox.com/using-important-css/
原文 2010-08-22 23:34:45
