讓我們來看一下!important是什么，以及在什么時候使用，如果你遇到類似情況，你就應(yīng)該使用它。 層疊的概述

在我們對!important的正確用法進行探討之前，讓我們?yōu)楸竟?jié)的內(nèi)容做個鋪墊。之前，Smashing Magazine已經(jīng)對CSS權(quán)重進行過深入的闡釋。所以，如果你想詳細了解CSS的層疊和權(quán)重關(guān)系就請讀讀這篇文章。

CSS權(quán)重早期在W3cplus中已進行翻譯，如果您閱讀英文有點吃力，可以閱讀譯文《你應(yīng)該知道的一些事情——CSS權(quán)重》

——大漠

下面這個提綱描述了CSS文檔是如何確定給不同的樣式分配不同的權(quán)重的。在CSS規(guī)范中提及的關(guān)于層疊的一個大體概括：

找到所有作用于元素和屬性的聲明 一個樣式是否作用于元素依賴于這個樣式的權(quán)重和如下所示樣式來源的順序，下面這個列表中越靠前的權(quán)重越小:

用戶代理聲明（譯注：如瀏覽器默認樣式） 用戶聲明（譯注：如用戶瀏覽器選項設(shè)置或通過開發(fā)人員調(diào)試工具修改） 開發(fā)者聲明（譯注：如頁面中引用的CSS） 帶有!important的開發(fā)者聲明 帶有!important的用戶聲明 樣式的應(yīng)用依賴具體的情況，一個更加具體的選擇器往往會比一個籠統(tǒng)選擇器獲得更大的權(quán)重。 樣式的應(yīng)用依賴樣式出現(xiàn)的順序（即，后面的會覆蓋前面的）

從這個提綱中，你可能已經(jīng)明白!important會如何改變權(quán)重以及它在層疊中扮演一個什么樣的角色。接下來讓我們看一下!important更多的細節(jié)。 語法和描述

!important為開發(fā)者提供了一個增加樣式權(quán)重的方法。應(yīng)當(dāng)注意的是!important是對整條樣式的聲明，包括這個樣式的屬性和屬性值（感謝Brad Czerniak指出其中的差別）。這里有個簡單的代碼示例可以清晰地說明!important是如何應(yīng)用于原本的樣式中的：

#example { font-size: 14px !important; }

#container #example { font-size: 10px; }

在上面的代碼示例中，由于使用了!important，id為“example”的元素字號將被設(shè)置為14px。

如果不使用!important，第二個樣式聲明的代碼塊很自然地比第一個的權(quán)重要大，原因有二：在樣式表中第二個代碼塊要比第一個出現(xiàn)的晚（即，它位列第二）；第二個代碼塊有更大的權(quán)重（是由兩個id，#container #example組合而成，而不是只有一個id，#example。但是因為第一個代碼塊里面包含了!important，所以對于字號設(shè)置來說它有更大的權(quán)重。

見CSS權(quán)重與繼承中關(guān)于權(quán)重的計算方法，如下圖:

Adding !important in Developer Tools

——譯者：David

關(guān)于!important應(yīng)該注意的一些地方：

當(dāng)!important第一次在CSS1中被介紹時是這樣規(guī)定的，即一個由開發(fā)者聲明的!important樣式要比一個由用戶聲明的!important樣式獲得更大的權(quán)重。為了提高訪問性，在CSS2 中它被顛倒了過來。 如果!important被用于一個簡寫的樣式屬性，那么這條簡寫的樣式屬性所代表的子屬性都會被作用上!important。 關(guān)鍵字!important必須放在一行樣式的末尾并且要放在該行分號前，否則就沒有效果。 （不過分號前的空格不會影響它） 如果因為一些特殊原因，你不得不在一個代碼塊中聲明兩個同樣的屬性，那么請把!important加在第一個屬性后面，因為這樣做會讓所有瀏覽器中第一個屬性的權(quán)重更大，而IE6除外（這是一個只有IE6才有的hack，但是不會影響你的CSS） 在IE6和IE7中如果你使用不同的單詞替代!important（像!hotdog），這條CSS樣式依然會獲得更大的權(quán)重，但是其他瀏覽器卻會忽略它。

針對第二點，譯者作出如下標(biāo)注：

.e{margin: 0 !important;}

那么就等價于

.e{ margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; }

——譯者：David

何時該使用!important

使用任何技術(shù)的利弊都視情況而定。下面是我個人對如何有效使用!important的一些觀點。

永不使用

非到萬不得已不要用!important。如果你是出于懶惰使用!important，為了避免例行的調(diào)試而濫用它，那么你（或者是那些后繼開發(fā)你項目的人）將會深受其害。

如果你并非濫用只是有偶爾用一下!important，同樣，你很快就會發(fā)現(xiàn)你的樣式會難以維護。正如上面我們討論過的，本來，CSS會根據(jù)層疊和權(quán)重產(chǎn)生正常的作用順序。但當(dāng)你使用了!important就擾亂了原本的順序，讓更多的權(quán)重給了正常情況下本不應(yīng)該獲得這么多權(quán)重的樣式。

如果你從不使用!important，那么這標(biāo)志著你真正理解了CSS并且證明你在編寫代碼前經(jīng)過深思熟慮。

正如古老的格言所說“永遠不要說‘永不’”，所以接下來我們還是要來討論!important的一些合理的用法。

幫助測試可訪問性

正如前面提到過的，用戶樣式中可以包含!important聲明，允許用戶根據(jù)自己的特殊需求來給具體的CSS樣式增加權(quán)重以幫助他們閱讀和訪問內(nèi)容。

有特殊需求的用戶可以把!important加到像font-size這樣的打印屬性上來加大字體，或者為了提高網(wǎng)頁的對比度而把它加到與顏色相關(guān)的樣式上。

下面這張Smashing Magazine首頁的截圖，展示的正是借助FireFox的開發(fā)人員工具把正常大小的文本用用戶自定義樣式覆蓋后的效果：

Adding !important in Developer Tools

在這個案例中，文本大小是隨瀏覽器窗口大小可調(diào)節(jié)的，樣式中并沒有使用!important，所以用戶定義的樣式會忽略權(quán)重而覆蓋開發(fā)者的樣式。然而，如果body正文的文本大小是開發(fā)者使用!important來設(shè)置的，就算用戶用更加具體的選擇器定義了樣式也不能覆蓋這個文本大小的設(shè)置。因此，即使在用戶樣式的作用下，甚至是開發(fā)者自己濫用!important的情況下，這條包含!important的樣式不僅解決了問題，還保持了文本大小的可調(diào)節(jié)性。

暫時解決緊急問題

總會有這樣的情況發(fā)生——某個客戶的線上網(wǎng)站出現(xiàn)了CSS的bug，你必須快速修復(fù)。在大多數(shù)情況下你應(yīng)該會用Firebug或者其他的開發(fā)者工具來調(diào)試你的CSS代碼并且最終修復(fù)它。但是，如果這個bug發(fā)生在IE6或者是其他沒有提供調(diào)試工具的瀏覽器上的時候，你可能需要使用!important來完成快速修復(fù)。

當(dāng)你用這個臨時修復(fù)的辦法讓網(wǎng)站繼續(xù)上線以后（這樣可以先擺平客戶），你再花些時間用不破壞層疊且可維護性高的方法來修復(fù)這個bug也為時未晚。當(dāng)你找到更好的解決方案你就可以替換掉線上的!important部分，而且客戶對此毫不知情。

用Firebug或者其他開發(fā)者工具覆寫樣式

我們可以使用Firebug或者Chrome開發(fā)者工具（譯注：兩者均可用F12喚出）查看頁面元素，在不影響真正的CSS樣式的情況下可以自由地編輯樣式，測試效果，調(diào)試bug等等。下面這張截圖展示的就是在Chrome開發(fā)者工具中看到的Smashing Magazine的一些樣式：

Adding !important in Developer Tools

圖中紅框內(nèi)帶有刪除線的樣式表明它已經(jīng)被后面的樣式覆蓋掉了。為了讓這條樣式再次作用，你得禁用后面的樣式。你也可以把選擇器寫得更加具體以增加權(quán)重，但是這樣會讓整個代碼塊的權(quán)重都增加，這并不是我們想要的。

!important可以被加在單行樣式的后面從而讓已經(jīng)被覆蓋的樣式重新作用。這樣的話，你不用大量修改你真正的樣式就可以調(diào)試你的CSS，直到你找到問題所在。

下圖所示是在上圖那條相同的樣式后面加了!important。你可能已經(jīng)注意到之前的刪除線不見了，因為現(xiàn)在這條樣式要比之前覆蓋它的那條有更大的權(quán)重：

Adding !important in Developer Tools

覆寫用戶生成內(nèi)容中的行內(nèi)樣式

CSS開發(fā)中一個讓人頭疼的問題，就是當(dāng)我們遇到用戶生成內(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,雖然不是所有情況下都需要這樣做，而且正如我們之前提到的那些原因一樣也不建議這么做。但是，這樣可以讓你在不用重復(fù)編寫選擇器的情況下就能覆蓋具體的樣式。

打印樣式即打印機在打印網(wǎng)頁時所使用的樣式，關(guān)于打印樣式的細節(jié)可以閱讀這篇文章

——譯者：David

關(guān)于單獨設(shè)計的博客頁面

如果你曾經(jīng)接觸過設(shè)計個人博客頁面的技術(shù)（許多設(shè)計師反對將 “藝術(shù)指導(dǎo)”用于這種技術(shù)，確實如此），像Heart Directed中展示的那樣，你會發(fā)現(xiàn)有一種需求要求每個單獨的文章都要有它自己獨立的樣式，抑或你需要使用行內(nèi)樣式。你可以用這篇文章中給出的代碼為一個個人頁面編寫它自己的樣式。

!important在這個時候可以派上用場，為了在你的站點里創(chuàng)建一個獨一無二的頁面，你可以輕松覆蓋默認的樣式而不必擔(dān)心原本的CSS權(quán)重。 總結(jié)

如果你遇到了特殊的需求，或者你想覆蓋用戶代理（譯注：即瀏覽器）和開發(fā)者的默認樣式，提高頁面可訪問性，你最好慎重使用!important。你要對你的CSS在考慮周全的同時盡可能地避免使用!important。甚至在上面提到的許多能用到!important的地方它也不總是必要的。

盡管如此，!important在CSS中還是有用的。如果你接手一個項目，而這個項目之前的開發(fā)人員正好使用了!important，那么你在修復(fù)一些問題的時候我們今天所討論的將會派上用場。

網(wǎng)站標(biāo)題：如何和何時使用CSS的!important
轉(zhuǎn)載源于：http://aaarwkj.com/news14/317314.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計公司、App開發(fā)、微信公眾號、Google、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)