css中!important的作用是什么

這篇文章將為大家詳細講解有關css中!important的作用是什么，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

{*rule !important}這個css規則當今在網頁制作的時候的普及已經非常流行了，以前我對它的理解就停留在‘瀏覽器是否識別階段’ 而沒有真正去研究過，可是現在發生了變化。眾所周知，!important這個規則對Ie6.0,Ie7.0和Firefox能寫hack，現在就來講解這是什么原理：

*對于Ie系列瀏覽器都能夠識別， firefox 瀏覽器則不能識別;

!important只有Ie7.0和firefox可以識別，但是Ie6.0不能成功應用.

(1)區別ie與firefox的hack為:border:2px solid #f00;*border:1px solid #f00;

(2)區別Ie6.0 與Ie7.0、firefox的hack為:border:1px solid #f00!important;border:2px solid #f00;

在(1)中，之所以把*放在后面是因為ff不識別*而導致只對它設置了一次border;而ie 系列進行了兩次border設置后，后一個屬性覆蓋了前一個屬性，故為一像素的邊框。

在(2)中，之所以把!important放在第一個border 設置，是因為它把這次border的優先級提高了，即使后面在一次甚至在N次設置border 也無效，但是Ie6.0對這個規則不接受，而導致它應用了第二次的border 設置，也就是第二次覆蓋了第一次的這一原理， 并不是它不識別!important;所以它的border為2 像素的紅框.

這是一個簡單的應用：

例一：

CSS

代碼如下:

#Box {
2 color:red !important;
3 color:blue;
4 }

HTML

1 <div id="Box"> 在不同的瀏覽器下，這行字的色應該不同！</div>

這個例子應該是大家經常見到的important的用法了，在IE環境下，這行字是藍色，在firefox下，為紅色，其用法不再多說了，看下一個例子。

例二：

CSS

代碼如下:

#Box div{
color:red;
}
.important_false{
color:blue;
}
.important_true{
color:blue !important;
}

HTML

代碼如下:

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

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

默認情況下，class的優先級小于id，所以，第二行中即使用class重定義了自身樣式，也無法生效，所以繼承父級屬性，這行字還是紅色！
但是，第三行中，用了important提升優先級（或看成強制重定義），所以這里的css得以生效，這行字變為了藍色！從這個例子，得以證明，ie對important的并不是不支持！

那么為什么很多人都說ie不認識它呢？我想應該是大家實戰中可能都沒有遇到例子中的情況： 當你想提升class的優先級時怎么辦？

也就是說大家可能都忽略了它的這一作用，只了解在命名為同一個元素的CSS代碼塊中，用它來提升排列順序相對靠前的代碼的優先級（例一）！

通過上邊兩個例子，得以總結：

important對 一個良好（或者是標準）的瀏覽器來說，不僅僅是從順序上提升代碼的優先級，還可以用來提升class的優先級（比如firefox），但是從IE對前者的不支持可以看出，這只是IE的一大BUG，而不能說它“不認識、不支持”！

然而，不管怎么樣，IE的這一大BUG幫助我們解決了很多兼容性問題，這顯然不是件壞事！

在IE中對盒模型（box-model）的解釋是有BUG的，IE6.0之前的版本會把某元素的邊框值和填充值包含在寬度之內（而不是加在寬度值上）。例如，你可能會使用以下css來指定某個容器的尺寸：

代碼如下:

#box
{
　width:100px;
　border:5px;
　padding:20px;
}

然后在html中應用：盒的總寬度在幾乎所有瀏覽器中為150像素（100像素寬度+兩條5像素的邊框+兩個20像素的填充），唯獨在IE6之前版本的瀏覽器中仍然為100像素（邊框值和填充值包含在寬度值中），使用盒模型的hack可以解決這一問題，

這樣一來在任何瀏覽器中盒的總寬度都將是150像素。

但是即使是到了最新的IE6.0依然存在浮動模型（Float-model）的問題,值得慶幸（還是悲哀？）的是我們可以用IE中一直都不支持的!important來解決這個問題。
!important是CSS1就定義的語法，作用是提高指定樣式規則的應用優先權(參見：W3.org的解釋)。語法格式{ sRule!important }，即寫在定義的最后面，

例如：

代碼如下:

box{color:red !important;}

假如我們定義一個這樣的樣式：

代碼如下:

#box{background-color: #ffffff !important; background-color: #000000;}

那么在支持該語法的瀏覽器，如Firefox、Opera中，能夠理解!important的優先級，背景顯示#ffffff顏色，而在IE中則顯示#000000.

關于css中!important的作用是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。