css important 屬性詳細解釋

!important是css1就定義的語法，作用是提高指定樣式規則的應用優先權。語法格式，即

寫在定義的最後面，例如：box

css企圖創造乙個平衡作者和使用者之間的級層樣式表。

預設情況下,css規則按級層覆蓋，例如在.css檔案中的定義可以被style標籤的定義覆蓋，反之則不行。

然而,對覆蓋平衡而言,加上乙個「!important」就優先於正常的css規則。

例:p

p p

p 在這些規則中未被覆蓋的有：

p p p

ie7,ie8,firefox,chrome等高階瀏覽器下，已經可以識別 !important屬性，但是ie 6.0仍然不能完全識別，汗! important的樣式屬性和覆蓋它的樣式屬性單獨使用時(不在乙個{}裡)，ie 6.0認為! important優先順序較高，否則當含! important的樣式屬性被同乙個{}裡的樣式覆蓋時，ie 6.0認為! important較低!

important，最主要是為了ie 6.0瀏覽器。

最重要的一點是：ie 6.0一直都不支援這個語法，而其他的瀏覽器都支援。因此我們就可以利用這一點來分別

給ie和其他瀏覽器不同的樣式定義，例如，我們定義這樣乙個樣式：

.colortest

在mozilla中瀏覽時候，能夠理解!important的優先順序，因此顯示#60a179的顏色：

在ie中瀏覽時候，不能夠理解!important的優先順序，因此顯示#00f的顏色：

可以看到，利用!important，我們可以針對ie和非ie瀏覽器設定不同的樣式，只要在非ie瀏覽器樣式的後面加

上!important。

ie6不完全支援!important

ie支援重定義中的!important，例如：

.yuanxin

你將會發現定義了樣式class="yuanxin"時，在ie下，字型顯示為紅色（#e00）。

但不支援同一定義中的!important。例如：

.yuanxin

此時在ie6下不支援，你將會發現定義了樣式class="yuanxin"時，字型顯示為黑色（#000）。

ie6中：

/*樣式1*/

#a /*有效*/

#a /*無效*/

/*樣式2*/

#a /*width:100px無效，width:50px 有效*/

這個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

html

在不同的瀏覽器下，這行字的色應該不同！

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

例二：css

1 #box div

2 .important_false

3.important_true

html

這一行末使用important

這一行使用了important

例二中，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

然後在html中應用：

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

#box 
\; 　　　　 忽略了\}\後的內容
voice-family:inherit;
width:100px; 　　　　　　//包括ie6/win在內的部分瀏覽器讀到這句，新的數值(300px)覆蓋掉了舊的
} 還有更簡單的辦法如下：
css:
#box 
#box div 
html:
...

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

但是即使是到了最新的ie6.0依然存在浮動模型（float-model）的問題,值得慶幸（還是悲哀？）的是我們可以用ie中一直都不支援的!important來解決這個問題。

!important是css1就定義的語法，作用是提高指定樣式規則的應用優先權(參見：w3.org的解釋)。語法格式，即寫在定義的最後面，

例如：

box

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

#box

那麼在支援該語法的瀏覽器，如firefox、opera中，能夠理解!important的優先順序，背景顯示#ffffff顏色，而在ie中則顯示#000000.

css important 屬性詳細解釋

Android attr format屬性詳解

CSS important宣告強制優先

CSS important的使用場景

css important 屬性詳細解釋

Android attr format屬性詳解

CSS important宣告強制優先

CSS important的使用場景

相關推薦