早在90年代中期到后期起草的 CSS1規(guī)范中就介紹過(guò)!important，它能夠幫助開發(fā)者和用戶在修改樣式表的時(shí)候輕松覆蓋原本的權(quán)重。一直以來(lái)!important的用法幾乎沒(méi)變，只在CSS2.1中有一點(diǎn)變化，并且在CSS3規(guī)范中沒(méi)有對(duì)它做任何添加和修改。
創(chuàng)新互聯(lián)專注于中大型企業(yè)的成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)和網(wǎng)站改版、網(wǎng)站營(yíng)銷服務(wù)，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開發(fā)的融合，累計(jì)客戶1000+，服務(wù)滿意度達(dá)97%。幫助廣大客戶順利對(duì)接上互聯(lián)網(wǎng)浪潮，準(zhǔn)確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運(yùn)用，我們將一直專注品牌網(wǎng)站建設(shè)和互聯(lián)網(wǎng)程序開發(fā)，在前進(jìn)的路上，與客戶一起成長(zhǎng)！
讓我們來(lái)看一下!important是什么，以及在什么時(shí)候使用，如果你遇到類似情況，你就應(yīng)該使用它。
層疊的概述
在我們對(duì)!important的正確用法進(jìn)行探討之前，讓我們?yōu)楸竟?jié)的內(nèi)容做個(gè)鋪墊。之前，Smashing Magazine已經(jīng)對(duì)CSS權(quán)重進(jìn)行過(guò)深入的闡釋。所以，如果你想詳細(xì)了解CSS的層疊和權(quán)重關(guān)系就請(qǐng)讀讀這篇文章。
CSS權(quán)重早期在W3cplus中已進(jìn)行翻譯，如果您閱讀英文有點(diǎn)吃力，可以閱讀譯文《你應(yīng)該知道的一些事情——CSS權(quán)重》
——大漠
下面這個(gè)提綱描述了CSS文檔是如何確定給不同的樣式分配不同的權(quán)重的。在CSS規(guī)范中提及的關(guān)于層疊的一個(gè)大體概括：
找到所有作用于元素和屬性的聲明
一個(gè)樣式是否作用于元素依賴于這個(gè)樣式的權(quán)重和如下所示樣式來(lái)源的順序，下面這個(gè)列表中越靠前的權(quán)重越小:
用戶代理聲明（譯注：如瀏覽器默認(rèn)樣式）
用戶聲明（譯注：如用戶瀏覽器選項(xiàng)設(shè)置或通過(guò)開發(fā)人員調(diào)試工具修改）
開發(fā)者聲明（譯注：如頁(yè)面中引用的CSS）
帶有!important的開發(fā)者聲明
帶有!important的用戶聲明
樣式的應(yīng)用依賴具體的情況，一個(gè)更加具體的選擇器往往會(huì)比一個(gè)籠統(tǒng)選擇器獲得更大的權(quán)重。
樣式的應(yīng)用依賴樣式出現(xiàn)的順序（即，后面的會(huì)覆蓋前面的）
從這個(gè)提綱中，你可能已經(jīng)明白!important會(huì)如何改變權(quán)重以及它在層疊中扮演一個(gè)什么樣的角色。接下來(lái)讓我們看一下!important更多的細(xì)節(jié)。
語(yǔ)法和描述
!important為開發(fā)者提供了一個(gè)增加樣式權(quán)重的方法。應(yīng)當(dāng)注意的是!important是對(duì)整條樣式的聲明，包括這個(gè)樣式的屬性和屬性值（感謝Brad Czerniak指出其中的差別）。這里有個(gè)簡(jiǎn)單的代碼示例可以清晰地說(shuō)明!important是如何應(yīng)用于原本的樣式中的：
#example {
font-size: 14px !important;
}
#container #example {
font-size: 10px;
}
在上面的代碼示例中，由于使用了!important，id為“example”的元素字號(hào)將被設(shè)置為14px。
如果不使用!important，第二個(gè)樣式聲明的代碼塊很自然地比第一個(gè)的權(quán)重要大，原因有二：在樣式表中第二個(gè)代碼塊要比第一個(gè)出現(xiàn)的晚（即，
它位列第二）；第二個(gè)代碼塊有更大的權(quán)重（是由兩個(gè)id，#container
#example組合而成，而不是只有一個(gè)id，#example。但是因?yàn)榈谝粋€(gè)代碼塊里面包含了!important，所以對(duì)于字號(hào)設(shè)置來(lái)說(shuō)它有更大
的權(quán)重。
見CSS權(quán)重與繼承中關(guān)于權(quán)重的計(jì)算方法，如下圖:
——譯者：David
關(guān)于!important應(yīng)該注意的一些地方：
當(dāng)!important第一次在CSS1中被介紹時(shí)是這樣規(guī)定的，即一個(gè)由開發(fā)者聲明的!important樣式要比一個(gè)由用戶聲明的!important樣式獲得更大的權(quán)重。為了提高訪問(wèn)性，在CSS2 中它被顛倒了過(guò)來(lái)。
如果!important被用于一個(gè)簡(jiǎn)寫的樣式屬性，那么這條簡(jiǎn)寫的樣式屬性所代表的子屬性都會(huì)被作用上!important。
關(guān)鍵字!important必須放在一行樣式的末尾并且要放在該行分號(hào)前，否則就沒(méi)有效果。 （不過(guò)分號(hào)前的空格不會(huì)影響它）
如果因?yàn)橐恍┨厥庠?，你不得不在一個(gè)代碼塊中聲明兩個(gè)同樣的屬性，那么請(qǐng)把!important加在第一個(gè)屬性后面，因?yàn)檫@樣做會(huì)讓所有瀏覽器中第一個(gè)屬性的權(quán)重更大，而IE6除外（這是一個(gè)只有IE6才有的hack，但是不會(huì)影響你的CSS）
在IE6和IE7中如果你使用不同的單詞替代!important（像!hotdog），這條CSS樣式依然會(huì)獲得更大的權(quán)重，但是其他瀏覽器卻會(huì)忽略它。
針對(duì)第二點(diǎn)，譯者作出如下標(biāo)注：
.e{margin: 0 !important;}
那么就等價(jià)于
.e{
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
}
——譯者：David
何時(shí)該使用!important
使用任何技術(shù)的利弊都視情況而定。下面是我個(gè)人對(duì)如何有效使用!important的一些觀點(diǎn)。
永不使用
非到萬(wàn)不得已不要用!important。如果你是出于懶惰使用!important，為了避免例行的調(diào)試而濫用它，那么你（或者是那些后繼開發(fā)你項(xiàng)目的人）將會(huì)深受其害。
如果你并非濫用只是有偶爾用一下!important，同樣，你很快就會(huì)發(fā)現(xiàn)你的樣式會(huì)難以維護(hù)。正如上面我們討論過(guò)的，本來(lái)，CSS會(huì)根據(jù)層疊和
權(quán)重產(chǎn)生正常的作用順序。但當(dāng)你使用了!important就擾亂了原本的順序，讓更多的權(quán)重給了正常情況下本不應(yīng)該獲得這么多權(quán)重的樣式。
如果你從不使用!important，那么這標(biāo)志著你真正理解了CSS并且證明你在編寫代碼前經(jīng)過(guò)深思熟慮。
正如古老的格言所說(shuō)“永遠(yuǎn)不要說(shuō)‘永不’”，所以接下來(lái)我們還是要來(lái)討論!important的一些合理的用法。
幫助測(cè)試可訪問(wèn)性
正如前面提到過(guò)的，用戶樣式中可以包含!important聲明，允許用戶根據(jù)自己的特殊需求來(lái)給具體的CSS樣式增加權(quán)重以幫助他們閱讀和訪問(wèn)內(nèi)容。
有特殊需求的用戶可以把!important加到像font-size這樣的打印屬性上來(lái)加大字體，或者為了提高網(wǎng)頁(yè)的對(duì)比度而把它加到與顏色相關(guān)的樣式上。
下面這張Smashing Magazine首頁(yè)的截圖，展示的正是借助FireFox的開發(fā)人員工具把正常大小的文本用用戶自定義樣式覆蓋后的效果：
在這個(gè)案例中，文本大小是隨瀏覽器窗口大小可調(diào)節(jié)的，樣式中并沒(méi)有使用!important，所以用戶定義的樣式會(huì)忽略權(quán)重而覆蓋開發(fā)者的樣式。然
而，如果body正文的文本大小是開發(fā)者使用!important來(lái)設(shè)置的，就算用戶用更加具體的選擇器定義了樣式也不能覆蓋這個(gè)文本大小的設(shè)置。因此，
即使在用戶樣式的作用下，甚至是開發(fā)者自己濫用!important的情況下，這條包含!important的樣式不僅解決了問(wèn)題，還保持了文本大小的可
調(diào)節(jié)性。
暫時(shí)解決緊急問(wèn)題
總會(huì)有這樣的情況發(fā)生——某個(gè)客戶的線上網(wǎng)站出現(xiàn)了CSS的bug，你必須快速修復(fù)。在大多數(shù)情況下你應(yīng)該會(huì)用Firebug或者其他的開發(fā)者工具
來(lái)調(diào)試你的CSS代碼并且最終修復(fù)它。但是，如果這個(gè)bug發(fā)生在IE6或者是其他沒(méi)有提供調(diào)試工具的瀏覽器上的時(shí)候，你可能需要使
用!important來(lái)完成快速修復(fù)。
當(dāng)你用這個(gè)臨時(shí)修復(fù)的辦法讓網(wǎng)站繼續(xù)上線以后（這樣可以先擺平客戶），你再花些時(shí)間用不破壞層疊且可維護(hù)性高的方法來(lái)修復(fù)這個(gè)bug也為時(shí)未晚。當(dāng)你找到更好的解決方案你就可以替換掉線上的!important部分，而且客戶對(duì)此毫不知情。
用Firebug或者其他開發(fā)者工具覆寫樣式
我們可以使用Firebug或者Chrome開發(fā)者工具（譯注：兩者均可用F12喚出）查看頁(yè)面元素，在不影響真正的CSS樣式的情況下可以自由地
編輯樣式，測(cè)試效果，調(diào)試bug等等。下面這張截圖展示的就是在Chrome開發(fā)者工具中看到的Smashing Magazine的一些樣式：
圖中紅框內(nèi)帶有刪除線的樣式表明它已經(jīng)被后面的樣式覆蓋掉了。為了讓這條樣式再次作用，你得禁用后面的樣式。你也可以把選擇器寫得更加具體以增加權(quán)重，但是這樣會(huì)讓整個(gè)代碼塊的權(quán)重都增加，這并不是我們想要的。
!important可以被加在單行樣式的后面從而讓已經(jīng)被覆蓋的樣式重新作用。這樣的話，你不用大量修改你真正的樣式就可以調(diào)試你的CSS，直到你找到問(wèn)題所在。
下圖所示是在上圖那條相同的樣式后面加了!important。你可能已經(jīng)注意到之前的刪除線不見了，因?yàn)楝F(xiàn)在這條樣式要比之前覆蓋它的那條有更大的權(quán)重：
覆寫用戶生成內(nèi)容中的行內(nèi)樣式
CSS開發(fā)中一個(gè)讓人頭疼的問(wèn)題，就是當(dāng)我們遇到用戶生成內(nèi)容中有行內(nèi)樣式的情況，這種情況多發(fā)生在一些使用了所見即所得網(wǎng)頁(yè)編輯器的CMS系統(tǒng)
中。在CSS層疊中，行內(nèi)樣式會(huì)覆蓋常規(guī)樣式。然而，我們并不想看到那些本該被我們定義好的CSS樣式作用的元素卻被用戶生成內(nèi)容中的行內(nèi)樣式改變。此時(shí)
你就可以用!important來(lái)避免這種問(wèn)題，因?yàn)?，一條被開發(fā)者加了!important的樣式會(huì)覆蓋行內(nèi)樣式。
你可以給只在打印時(shí)生效的樣式加上!important,雖然不是所有情況下都需要這樣做，而且正如我們之前提到的那些原因一樣也不建議這么做。但是，這樣可以讓你在不用重復(fù)編寫選擇器的情況下就能覆蓋具體的樣式。
打印樣式即打印機(jī)在打印網(wǎng)頁(yè)時(shí)所使用的樣式，關(guān)于打印樣式的細(xì)節(jié)可以閱讀這篇文章
——譯者：David
關(guān)于單獨(dú)設(shè)計(jì)的博客頁(yè)面
如果你曾經(jīng)接觸過(guò)設(shè)計(jì)個(gè)人博客頁(yè)面的技術(shù)（許多設(shè)計(jì)師反對(duì)將 “藝術(shù)指導(dǎo)”用于這種技術(shù)，確實(shí)如此），像Heart Directed中展示的那樣，你會(huì)發(fā)現(xiàn)有一種需求要求每個(gè)單獨(dú)的文章都要有它自己獨(dú)立的樣式，抑或你需要使用行內(nèi)樣式。你可以用這篇文章中給出的代碼為一個(gè)個(gè)人頁(yè)面編寫它自己的樣式。
!important在這個(gè)時(shí)候可以派上用場(chǎng)，為了在你的站點(diǎn)里創(chuàng)建一個(gè)獨(dú)一無(wú)二的頁(yè)面，你可以輕松覆蓋默認(rèn)的樣式而不必?fù)?dān)心原本的CSS權(quán)重。
p標(biāo)簽是行內(nèi)元素，因此不滿一行，后面的p會(huì)頂替空白的位置，建議你換成行元素，就是一個(gè)元素占據(jù)一行的元素，例如div,li,ul等，或者你可以以對(duì)p設(shè)定為style="display:block"。這樣第二行就不會(huì)到第一行了
在調(diào)試中發(fā)現(xiàn)css樣式被劃了橫線表示該css樣式被層疊不會(huì)被解釋執(zhí)行，相當(dāng)于沒(méi)寫！
當(dāng)同一個(gè)HTML元素被不止一個(gè)樣式定義時(shí)，一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。
1.瀏覽器缺省設(shè)置
2.外部樣式表
3.內(nèi)部樣式表（位于 head 標(biāo)簽內(nèi)部）
4.內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
因此，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明：head 標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。
在僅有 (1) 和 (2) 時(shí)，(1) 生效，因?yàn)?(1) 的權(quán)值比 (2) 高；在 (1) (2) (3) 并存時(shí)，(3) 生效，因?yàn)殡m然 (2)(3) 的權(quán)值一樣，但 (3) 是后聲明的，會(huì)覆蓋 (2)。解決方法如下：
1、首先新建一個(gè)html文件，命名為test.html。
2、在test.html文件內(nèi)，使用div標(biāo)簽創(chuàng)建圖層1，同時(shí)設(shè)置div的class為div1，主要用于下面通過(guò)該class來(lái)設(shè)置css樣式。
3、在test.html文件內(nèi)，再使用div標(biāo)簽創(chuàng)建圖層2，同時(shí)設(shè)置div的class為div2。
4、在css標(biāo)簽內(nèi)，對(duì)頁(yè)面的div元素進(jìn)行樣式統(tǒng)一設(shè)置，定義它們的寬度和高度都為250px。
5、在css標(biāo)簽內(nèi)，對(duì)類名div1的div（圖層1）進(jìn)行樣式設(shè)置，使用position設(shè)置div為相對(duì)定位，使用background設(shè)置div背景顏色為紅色，使用z-index設(shè)置div層級(jí)為1。
6、最后在瀏覽器打開test.html文件，查看實(shí)現(xiàn)的效果，就完成了。
重慶分公司
重慶分公司
