!important語法和描述
!important為開發者提供了一個增加樣式權重的方法。應當注意的是!important是對整條樣式的聲明,包括這個樣式的屬性和屬性值。
#example { font-size: 14px !important; } #container #example { font-size: 10px; }
實例說明:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div1 { color: red !important; /*color: red;*/ } #div1 { color: blue; font-weight: bold; } </style> </head> <body> <div class="div1" id='div1' style='color:green;'> <p>div1內容</p> <span>span中的內容</span> </div> </body> </html>
實例總結:
1.!important會修改當前對應元素的當前css屬性和值得權重
2.!important指定的屬性權重比class選擇器,ID選擇器,內聯樣式的權重都高。
3.!important只對當前元素當前屬性權重有影響,對子元素權重沒影響
4.如果在在不懂選擇器中,相同屬性和值都指定了!important,選擇器權重高的屬性起作用
例如:
.div1 { color: red !important; } #div1 { color: blue !important; }
瀏覽器解析結果,div中顏色為藍色。
關於!important應該注意的一些地方:
- 當!important第一次在CSS1中被介紹時是這樣規定的,即一個由開發者聲明的!important樣式要比一個由用戶聲明的!important樣式獲得更大的權重。為了提高訪問性,在CSS2 中它被顛倒了過來。
- 如果!important被用於一個簡寫的樣式屬性,那么這條簡寫的樣式屬性所代表的子屬性都會被作用上!important。
- 關鍵字!important必須放在一行樣式的末尾並且要放在該行分號前,否則就沒有效果。 (不過分號前的空格不會影響它)
- 如果因為一些特殊原因,你不得不在一個代碼塊中聲明兩個同樣的屬性,那么請把!important加在第一個屬性后面,因為這樣做會讓所有瀏覽器中第一個屬性的權重更大,而IE6除外(這是一個只有IE6才有的hack,但是不會影響你的CSS)
永不使用
非到萬不得已不要用!important。如果你是出於懶惰使用!important,為了避免例行的調試而濫用它,那么你(或者是那些后繼開發你項目的人)將會深受其害。
如果你並非濫用只是有偶爾用一下!important,同樣,你很快就會發現你的樣式會難以維護。正如上面我們討論過的,本來,CSS會根據層疊和權重產生正常的作用順序。但當你使用了!important就擾亂了原本的順序,讓更多的權重給了正常情況下本不應該獲得這么多權重的樣式。
如果你從不使用!important,那么這標志着你真正理解了CSS並且證明你在編寫代碼前經過深思熟慮。
正如古老的格言所說“永遠不要說‘永不’”,所以接下來我們還是要來討論!important的一些合理的用法。
幫助測試可訪問性
正如前面提到過的,用戶樣式中可以包含!important聲明,允許用戶根據自己的特殊需求來給具體的CSS樣式增加權重以幫助他們閱讀和訪問內容。
有特殊需求的用戶可以把!important加到像font-size這樣的打印屬性上來加大字體,或者為了提高網頁的對比度而把它加到與顏色相關的樣式上。
暫時解決緊急問題
總會有這樣的情況發生——某個客戶的線上網站出現了CSS的bug,你必須快速修復。在大多數情況下你應該會用Firebug或者其他的開發者工具來調試你的CSS代碼並且最終修復它。但是,如果這個bug發生在IE6或者是其他沒有提供調試工具的瀏覽器上的時候,你可能需要使用!important來完成快速修復。
當你用這個臨時修復的辦法讓網站繼續上線以后(這樣可以先擺平客戶),你再花些時間用不破壞層疊且可維護性高的方法來修復這個bug也為時未晚。當你找到更好的解決方案你就可以替換掉線上的!important部分,而且客戶對此毫不知情。
覆寫用戶生成內容中的行內樣式
CSS開發中一個讓人頭疼的問題,就是當我們遇到用戶生成內容中有行內樣式的情況,這種情況多發生在一些使用了所見即所得網頁編輯器的CMS系統中。在CSS層疊中,行內樣式會覆蓋常規樣式。然而,我們並不想看到那些本該被我們定義好的CSS樣式作用的元素卻被用戶生成內容中的行內樣式改變。此時你就可以用!important來避免這種問題,因為,一條被開發者加了!important的樣式會覆蓋行內樣式。
關於單獨設計的博客頁面
如果你曾經接觸過設計個人博客頁面的技術(許多設計師反對將 “藝術指導”用於這種技術,確實如此),像Heart Directed中展示的那樣,你會發現有一種需求要求每個單獨的文章都要有它自己獨立的樣式,抑或你需要使用行內樣式。你可以用這篇文章中給出的代碼為一個個人頁面編寫它自己的樣式。
!important在這個時候可以派上用場,為了在你的站點里創建一個獨一無二的頁面,你可以輕松覆蓋默認的樣式而不必擔心原本的CSS權重。
總結
如果你遇到了特殊的需求,或者你想覆蓋用戶代理(譯注:即瀏覽器)和開發者的默認樣式,提高頁面可訪問性,你最好慎重使用!important。你要對你的CSS在考慮周全的同時盡可能地避免使用!important。甚至在上面提到的許多能用到!important的地方它也不總是必要的。
盡管如此,!important在CSS中還是有用的。如果你接手一個項目,而這個項目之前的開發人員正好使用了!important,那么你在修復一些問題的時候我們今天所討論的將會派上用場。
博文部分內容來自:http://www.w3cplus.com/css/the-important-css-declaration-how-and-when-to-use-it.html