css !important的用法

css !important的用法

一、!important語法

選擇器{樣式:值!import;}

!important為開發者提供了一個增加樣式權重的方法。應當注意的是!important是對整條樣式的聲明，包括這個樣式的屬性和屬性值

二、!important實例

<style type="text/css">...
<!--將!important去掉試試效果-->
a{...}{color:green!important;}
#main a{...}{ color:blue;}
</style>

 
<li id="main">
<a>!important實例</a>
</li>


		

對于上面的代碼，如果不加important特性，則超鏈接的顏色為藍色，但是加上important之后優先級提高了，顯示顏色為綠色。
 

2、

<style>...
#Box li{...}{
     color:red;
}
.important_false{...}{
     color:blue;
}
important_true{...}{
     color:blue !important;
}
</style>


<li id="Box">
    <li class="important_false">這一行末使用important</li>
    <li class="important_true">這一行使用了important</li>
</li>

		

CSS代碼第一行設定了box里面所有li中字體色為紅色，第二行和第三行都用class重新定義了自身li的字體色為藍色，不同的是，第二行末使用important，而第三行使用了！

默認情況下，class的優先級小于id，所以，第二行中即使用class重定義了自身樣式，也無法生效，所以繼承父級屬性，這行字還是紅色！

但是，第三行中，用了important提升優先級（或看成強制重定義），所以這里的css得以生效，這行字變為了藍色！

三、!important應該注意的一些地方

1、如果!important被用于一個簡寫的樣式屬性，那么這條簡寫的樣式屬性所代表的子屬性都會被作用上!important。

2、關鍵字!important必須放在一行樣式的末尾并且要放在該行分號前，否則就沒有效果。 （不過分號前的空格不會影響它）

3、如果因為一些特殊原因，你不得不在一個代碼塊中聲明兩個同樣的屬性，那么請把!important加在第一個屬性后面，因為這樣做會讓所有瀏覽器中第一個屬性的權重更大，而IE6除外（這是一個只有IE6才有的hack，但是不會影響你的CSS）

四、何時該使用!important

1、幫助測試可訪問性

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

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

2、暫時解決緊急問題

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

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

3、用Firebug或者其他開發者工具覆寫樣式

我們可以使用Firebug或者Chrome開發者工具（譯注：兩者均可用F12喚出）查看頁面元素，在不影響真正的CSS樣式的情況下可以自由地編輯樣式，測試效果，調試bug等等。

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

4、覆寫用戶生成內容中的行內樣式

CSS開發中一個讓人頭疼的問題，就是當我們遇到用戶生成內容中有行內樣式的情況，這種情況多發生在一些使用了所見即所得網頁編輯器的CMS系統中。在CSS層疊中，行內樣式會覆蓋常規樣式。然而，我們并不想看到那些本該被我們定義好的CSS樣式作用的元素卻被用戶生成內容中的行內樣式改變。此時你就可以用!important來避免這種問題，因為，一條被開發者加了!important的樣式會覆蓋行內樣式。

關于單獨設計的博客頁面

如果你曾經接觸過設計個人博客頁面的技術,有一種需求要求每個單獨的文章都要有它自己獨立的樣式，需要使用行內樣式。你可以用!important代碼為一個個人頁面編寫它自己的樣式。

!important在這個時候可以派上用場，為了在你的站點里創建一個獨一無二的頁面，你可以輕松覆蓋默認的樣式而不必擔心原本的CSS權重。

五、!important總結

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

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