如何和何时使用 CSS 的权重设置 !important （建议：永不使用！）
前些天發(fā)現(xiàn)了一個巨牛的人工智能學習網(wǎng)站，通俗易懂，風趣幽默，忍不住分享一下給大家。點擊跳轉(zhuǎn)到教程。?
特別聲明：此篇文章由David根據(jù)Louis Lazaris的英文文章原名《!important CSS Declarations: How and When to Use Them》進行翻譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或不對之處還請同行朋友指點。如需轉(zhuǎn)載此譯文，需注明英文出處：http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it以及作者相關信息
——作者：Louis Lazaris
——譯者：David
早在90年代中期到后期起草的?CSS1規(guī)范中就介紹過!important，它能夠幫助開發(fā)者和用戶在修改樣式表的時候輕松覆蓋原本的權重。一直以來!important的用法幾乎沒變，只在CSS2.1中有一點變化，并且在CSS3規(guī)范中沒有對它做任何添加和修改。
讓我們來看一下!important是什么，以及在什么時候使用，如果你遇到類似情況，你就應該使用它。
層疊的概述
在我們對!important的正確用法進行探討之前，讓我們?yōu)楸竟?jié)的內(nèi)容做個鋪墊。之前，Smashing Magazine已經(jīng)對CSS權重進行過深入的闡釋。所以，如果你想詳細了解CSS的層疊和權重關系就請讀讀這篇文章。
CSS權重早期在W3cplus中已進行翻譯，如果您閱讀英文有點吃力，可以閱讀譯文《你應該知道的一些事情——CSS權重》
——大漠
下面這個提綱描述了CSS文檔是如何確定給不同的樣式分配不同的權重的。在CSS規(guī)范中提及的關于層疊的一個大體概括：
- 找到所有作用于元素和屬性的聲明
- 一個樣式是否作用于元素依賴于這個樣式的權重和如下所示樣式來源的順序，下面這個列表中越靠前的權重越小:
- 用戶代理聲明（譯注：如瀏覽器默認樣式）
- 用戶聲明（譯注：如用戶瀏覽器選項設置或通過開發(fā)人員調(diào)試工具修改）
- 開發(fā)者聲明（譯注：如頁面中引用的CSS）
- 帶有!important的開發(fā)者聲明
- 帶有!important的用戶聲明
- 樣式的應用依賴具體的情況，一個更加具體的選擇器往往會比一個籠統(tǒng)選擇器獲得更大的權重。
- 樣式的應用依賴樣式出現(xiàn)的順序（即，后面的會覆蓋前面的）
從這個提綱中，你可能已經(jīng)明白!important會如何改變權重以及它在層疊中扮演一個什么樣的角色。接下來讓我們看一下!important更多的細節(jié)。
語法和描述
!important為開發(fā)者提供了一個增加樣式權重的方法。應當注意的是!important是對整條樣式的聲明，包括這個樣式的屬性和屬性值（感謝Brad Czerniak指出其中的差別）。這里有個簡單的代碼示例可以清晰地說明!important是如何應用于原本的樣式中的：
#example {font-size: 14px !important; }#container #example {font-size: 10px; }在上面的代碼示例中，由于使用了!important，id為“example”的元素字號將被設置為14px。
如果不使用!important，第二個樣式聲明的代碼塊很自然地比第一個的權重要大，原因有二：在樣式表中第二個代碼塊要比第一個出現(xiàn)的晚（即，它位列第二）；第二個代碼塊有更大的權重（是由兩個id，#container #example組合而成，而不是只有一個id，#example。但是因為第一個代碼塊里面包含了!important，所以對于字號設置來說它有更大的權重。
見CSS權重與繼承中關于權重的計算方法，如下圖:
——譯者：David
關于!important應該注意的一些地方：
針對第二點，譯者作出如下標注：
.e{margin: 0 !important;}那么就等價于
.e{margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; }——譯者：David
何時該使用!important
使用任何技術的利弊都視情況而定。下面是我個人對如何有效使用!important的一些觀點。
永不使用
非到萬不得已不要用!important。如果你是出于懶惰使用!important，為了避免例行的調(diào)試而濫用它，那么你（或者是那些后繼開發(fā)你項目的人）將會深受其害。
如果你并非濫用只是有偶爾用一下!important，同樣，你很快就會發(fā)現(xiàn)你的樣式會難以維護。正如上面我們討論過的，本來，CSS會根據(jù)層疊和權重產(chǎn)生正常的作用順序。但當你使用了!important就擾亂了原本的順序，讓更多的權重給了正常情況下本不應該獲得這么多權重的樣式。
如果你從不使用!important，那么這標志著你真正理解了CSS并且證明你在編寫代碼前經(jīng)過深思熟慮。
正如古老的格言所說“永遠不要說‘永不’”，所以接下來我們還是要來討論!important的一些合理的用法。
幫助測試可訪問性
正如前面提到過的，用戶樣式中可以包含!important聲明，允許用戶根據(jù)自己的特殊需求來給具體的CSS樣式增加權重以幫助他們閱讀和訪問內(nèi)容。
有特殊需求的用戶可以把!important加到像font-size這樣的打印屬性上來加大字體，或者為了提高網(wǎng)頁的對比度而把它加到與顏色相關的樣式上。
下面這張Smashing Magazine首頁的截圖，展示的正是借助FireFox的開發(fā)人員工具把正常大小的文本用用戶自定義樣式覆蓋后的效果：
在這個案例中，文本大小是隨瀏覽器窗口大小可調(diào)節(jié)的，樣式中并沒有使用!important，所以用戶定義的樣式會忽略權重而覆蓋開發(fā)者的樣式。然而，如果body正文的文本大小是開發(fā)者使用!important來設置的，就算用戶用更加具體的選擇器定義了樣式也不能覆蓋這個文本大小的設置。因此，即使在用戶樣式的作用下，甚至是開發(fā)者自己濫用!important的情況下，這條包含!important的樣式不僅解決了問題，還保持了文本大小的可調(diào)節(jié)性。
暫時解決緊急問題
總會有這樣的情況發(fā)生——某個客戶的線上網(wǎng)站出現(xiàn)了CSS的bug，你必須快速修復。在大多數(shù)情況下你應該會用Firebug或者其他的開發(fā)者工具來調(diào)試你的CSS代碼并且最終修復它。但是，如果這個bug發(fā)生在IE6或者是其他沒有提供調(diào)試工具的瀏覽器上的時候，你可能需要使用!important來完成快速修復。
當你用這個臨時修復的辦法讓網(wǎng)站繼續(xù)上線以后（這樣可以先擺平客戶），你再花些時間用不破壞層疊且可維護性高的方法來修復這個bug也為時未晚。當你找到更好的解決方案你就可以替換掉線上的!important部分，而且客戶對此毫不知情。
用Firebug或者其他開發(fā)者工具覆寫樣式
我們可以使用Firebug或者Chrome開發(fā)者工具（譯注：兩者均可用F12喚出）查看頁面元素，在不影響真正的CSS樣式的情況下可以自由地編輯樣式，測試效果，調(diào)試bug等等。下面這張截圖展示的就是在Chrome開發(fā)者工具中看到的Smashing Magazine的一些樣式：
圖中紅框內(nèi)帶有刪除線的樣式表明它已經(jīng)被后面的樣式覆蓋掉了。為了讓這條樣式再次作用，你得禁用后面的樣式。你也可以把選擇器寫得更加具體以增加權重，但是這樣會讓整個代碼塊的權重都增加，這并不是我們想要的。
!important可以被加在單行樣式的后面從而讓已經(jīng)被覆蓋的樣式重新作用。這樣的話，你不用大量修改你真正的樣式就可以調(diào)試你的CSS，直到你找到問題所在。
下圖所示是在上圖那條相同的樣式后面加了!important。你可能已經(jīng)注意到之前的刪除線不見了，因為現(xiàn)在這條樣式要比之前覆蓋它的那條有更大的權重：
覆寫用戶生成內(nèi)容中的行內(nèi)樣式
CSS開發(fā)中一個讓人頭疼的問題，就是當我們遇到用戶生成內(nèi)容中有行內(nèi)樣式的情況，這種情況多發(fā)生在一些使用了所見即所得網(wǎng)頁編輯器的CMS系統(tǒng)中。在CSS層疊中，行內(nèi)樣式會覆蓋常規(guī)樣式。然而，我們并不想看到那些本該被我們定義好的CSS樣式作用的元素卻被用戶生成內(nèi)容中的行內(nèi)樣式改變。此時你就可以用!important來避免這種問題，因為，一條被開發(fā)者加了!important的樣式會覆蓋行內(nèi)樣式。
?
你可以給只在打印時生效的樣式加上!important,雖然不是所有情況下都需要這樣做，而且正如我們之前提到的那些原因一樣也不建議這么做。但是，這樣可以讓你在不用重復編寫選擇器的情況下就能覆蓋具體的樣式。
打印樣式即打印機在打印網(wǎng)頁時所使用的樣式，關于打印樣式的細節(jié)可以閱讀這篇文章
——譯者：David
關于單獨設計的博客頁面
如果你曾經(jīng)接觸過設計個人博客頁面的技術（許多設計師反對將 “藝術指導”用于這種技術，確實如此），像Heart Directed中展示的那樣，你會發(fā)現(xiàn)有一種需求要求每個單獨的文章都要有它自己獨立的樣式，抑或你需要使用行內(nèi)樣式。你可以用這篇文章中給出的代碼為一個個人頁面編寫它自己的樣式。
!important在這個時候可以派上用場，為了在你的站點里創(chuàng)建一個獨一無二的頁面，你可以輕松覆蓋默認的樣式而不必擔心原本的CSS權重。
總結(jié)
如果你遇到了特殊的需求，或者你想覆蓋用戶代理（譯注：即瀏覽器）和開發(fā)者的默認樣式，提高頁面可訪問性，你最好慎重使用!important。你要對你的CSS在考慮周全的同時盡可能地避免使用!important。甚至在上面提到的許多能用到!important的地方它也不總是必要的。
盡管如此，!important在CSS中還是有用的。如果你接手一個項目，而這個項目之前的開發(fā)人員正好使用了!important，那么你在修復一些問題的時候我們今天所討論的將會派上用場。
擴展閱讀
譯者手語：初次翻譯前端技術博文，整個翻譯依照原文線路進行，并在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！
關于David
2009年開始接觸前端開發(fā)，2011年組建創(chuàng)業(yè)團隊——[五維互動]，2012年團隊被“收編”并更名[創(chuàng)影互動]，遂只身來上海發(fā)展，現(xiàn)在就職于FlipScript。歡迎交流共勉：騰訊微博、個人博客。
英文原文：http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it
轉(zhuǎn)自：https://www.w3cplus.com/css/the-important-css-declaration-how-and-when-to-use-it.html
?
總結(jié)
以上是生活随笔為你收集整理的如何和何时使用 CSS 的权重设置 !important （建议：永不使用！）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Lock锁的问题
- 下一篇： CSS 中 的 margin、borde