css中 important的作用

2021-06-10 14:08:41 字數 2937 閱讀 5122

之前調整css的時候沒有怎麼用過css中important屬性,這段時間調整頁面,看到了這個屬性,了解一下並在修改bug過程中簡單的用了一下。

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

#box div

.important_false

.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來指定某個容器的尺寸:

#box2

然後在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.

在頁面的dojo grid裡面有自己的css樣式,要修改grid的樣式就要修改dojo grid的樣式,在自己定義的css樣式中 重新編寫dojo grid的css方法,在firefox中檢視的時候會發現這個css樣式不起作用,如果加上!important以後 就會得到所要效果。

CSS中 important的使用

本篇文章使用最新的ie10以及firefox與chrome測試 截止2013年5月27日22 23 22 css的原理 我們知道,css寫在不同的地方有不同的優先順序,css檔案中的定義 元素style中的屬性,但是如果使用 important,事情就會變得不一樣。首先,先看下面一段 測試css中的...

CSS中 !important 的使用

important作用是提高指定css樣式規則的應用優先權 在css中,通過對某一樣式宣告 important 可以更改預設的css樣式優先順序規則,使該條樣式屬性宣告具有最高優先順序,也就是相當於寫在最下面。一般地,css檔案中的定義 元素style中的屬性 測試css中的 important區別...

CSS中 important的使用

本篇文章使用最新的ie10以及firefox與chrome測試 截止2013年5月27日22 23 22 css的原理 我們知道,css寫在不同的地方有不同的優先順序,css檔案中的定義 元素style中的屬性,但是如果使用 important,事情就會變得不一樣。首先,先看下面一段 測試css中的...