讓我們來(lái)看一下!important是什么，以及在什么時(shí)候使用，如果你遇到類(lèi)似情況，你就應(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è)樣式是否作用于元素依賴(lài)于這個(gè)樣式的權(quán)重和如下所示樣式來(lái)源的順序，下面這個(gè)列表中越靠前的權(quán)重越小:

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

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

!important為開(kāi)發(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)重。

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

Adding !important in Developer Tools

——譯者：David

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

當(dāng)!important第一次在CSS1中被介紹時(shí)是這樣規(guī)定的，即一個(gè)由開(kāi)發(fā)者聲明的!important樣式要比一個(gè)由用戶聲明的!important樣式獲得更大的權(quán)重。為了提高訪問(wèn)性，在CSS2 中它被顛倒了過(guò)來(lái)。 如果!important被用于一個(gè)簡(jiǎn)寫(xiě)的樣式屬性，那么這條簡(jiǎn)寫(xiě)的樣式屬性所代表的子屬性都會(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)試而濫用它，那么你（或者是那些后繼開(kāi)發(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并且證明你在編寫(xiě)代碼前經(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的開(kāi)發(fā)人員工具把正常大小的文本用用戶自定義樣式覆蓋后的效果：

Adding !important in Developer Tools

在這個(gè)案例中，文本大小是隨瀏覽器窗口大小可調(diào)節(jié)的，樣式中并沒(méi)有使用!important，所以用戶定義的樣式會(huì)忽略權(quán)重而覆蓋開(kāi)發(fā)者的樣式。然而，如果body正文的文本大小是開(kāi)發(fā)者使用!important來(lái)設(shè)置的，就算用戶用更加具體的選擇器定義了樣式也不能覆蓋這個(gè)文本大小的設(shè)置。因此，即使在用戶樣式的作用下，甚至是開(kāi)發(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或者其他的開(kāi)發(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或者其他開(kāi)發(fā)者工具覆寫(xiě)樣式

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

Adding !important in Developer Tools

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

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

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

Adding !important in Developer Tools

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

CSS開(kāi)發(fā)中一個(gè)讓人頭疼的問(wèn)題，就是當(dāng)我們遇到用戶生成內(nèi)容中有行內(nèi)樣式的情況，這種情況多發(fā)生在一些使用了所見(jiàn)即所得網(wǎng)頁(yè)編輯器的CMS系統(tǒng)中。在CSS層疊中，行內(nèi)樣式會(huì)覆蓋常規(guī)樣式。然而，我們并不想看到那些本該被我們定義好的CSS樣式作用的元素卻被用戶生成內(nèi)容中的行內(nèi)樣式改變。此時(shí)你就可以用!important來(lái)避免這種問(wèn)題，因?yàn)?，一條被開(kāi)發(fā)者加了!important的樣式會(huì)覆蓋行內(nèi)樣式。

你可以給只在打印時(shí)生效的樣式加上!important,雖然不是所有情況下都需要這樣做，而且正如我們之前提到的那些原因一樣也不建議這么做。但是，這樣可以讓你在不用重復(fù)編寫(xiě)選擇器的情況下就能覆蓋具體的樣式。

打印樣式即打印機(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è)面編寫(xiě)它自己的樣式。

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

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

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

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

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

廣告

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