css important終級講解
發(fā)布時間：2010-01-05 17:28:49 作者：佚名 
我要評論
我要評論很多人，包括很多網(wǎng)站（我所見過的所有網(wǎng)站，包括國內(nèi)著名的‘網(wǎng)頁設(shè)計師’網(wǎng)站），都說important是不被IE所支持和認識的，可是真的是這樣嗎？看了下邊的兩個例子，也許你會改變一些看法！
例一：
CSS
#box {
color:red !important;
color:blue;
}
HTML
<div id="Box"> 在不同的瀏覽器下，這行字的色應該不同！</div>
這個例子應該是大家經(jīng)常見到的important的用法了，在IE環(huán)境下，這行字是藍色，在firefox下，為紅色，其用法不再多說了，看下一個例子。
例二：
CSS
1 #box div{
color:red;
}
2 .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代碼第一行設(shè)定了box里面所有div中字體色為紅色，第二行和第三行都用class重新定義了自身div的字體色為藍色，不同的是，第二行末使用important，而第三行使用了！
默認情況下，class的優(yōu)先級小于id，所以，第二行中即使用class重定義了自身樣式，也無法生效，所以繼承父級屬性，這行字還是紅色！
但是，第三行中，用了important提升優(yōu)先級（或看成強制重定義），所以這里的css得以生效，這行字變?yōu)榱怂{色！
從這個例子，得以證明，ie對important的并不是不支持！
那么為什么很多人都說ie不認識它呢？我想應該是大家實戰(zhàn)中可能都沒有遇到例子中的情況： 當你想提升class的優(yōu)先級時怎么辦？
也就是說大家可能都忽略了它的這一作用，只了解在命名為同一個元素的CSS代碼塊中，用它來提升排列順序相對靠前的代碼的優(yōu)先級（例一）！
通過上邊兩個例子，得以總結(jié)：
important對 一個良好（或者是標準）的瀏覽器來說，不僅僅是從順序上提升代碼的優(yōu)先級，還可以用來提升class的優(yōu)先級（比如firefox），但是從IE對前者的不支持可以看出，這只是IE的一大BUG，而不能說它“不認識、不支持”！
然而，不管怎么樣，IE的這一大BUG幫助我們解決了很多兼容性問題，這顯然不是件壞事！
CSS
復制代碼
代碼如下:#box {
color:red !important;
color:blue;
}
HTML
復制代碼
代碼如下:<div id="Box"> 在不同的瀏覽器下，這行字的色應該不同！</div>
這個例子應該是大家經(jīng)常見到的important的用法了，在IE環(huán)境下，這行字是藍色，在firefox下，為紅色，其用法不再多說了，看下一個例子。
例二：
CSS
復制代碼
代碼如下:1 #box div{
color:red;
}
2 .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代碼第一行設(shè)定了box里面所有div中字體色為紅色，第二行和第三行都用class重新定義了自身div的字體色為藍色，不同的是，第二行末使用important，而第三行使用了！
默認情況下，class的優(yōu)先級小于id，所以，第二行中即使用class重定義了自身樣式，也無法生效，所以繼承父級屬性，這行字還是紅色！
但是，第三行中，用了important提升優(yōu)先級（或看成強制重定義），所以這里的css得以生效，這行字變?yōu)榱怂{色！
從這個例子，得以證明，ie對important的并不是不支持！
那么為什么很多人都說ie不認識它呢？我想應該是大家實戰(zhàn)中可能都沒有遇到例子中的情況： 當你想提升class的優(yōu)先級時怎么辦？
也就是說大家可能都忽略了它的這一作用，只了解在命名為同一個元素的CSS代碼塊中，用它來提升排列順序相對靠前的代碼的優(yōu)先級（例一）！
通過上邊兩個例子，得以總結(jié)：
important對 一個良好（或者是標準）的瀏覽器來說，不僅僅是從順序上提升代碼的優(yōu)先級，還可以用來提升class的優(yōu)先級（比如firefox），但是從IE對前者的不支持可以看出，這只是IE的一大BUG，而不能說它“不認識、不支持”！
然而，不管怎么樣，IE的這一大BUG幫助我們解決了很多兼容性問題，這顯然不是件壞事！
相關(guān)文章
CSS中l(wèi)ink和@import的區(qū)別說明
link與@import這兩種方式都是為了加載CSS文件,但還是存在著細微的差別。下面腳本之家小編給大家介紹CSS中l(wèi)ink和@import的區(qū)別說明，感興趣的朋友一起看下吧2016-08-12淺談CSS 權(quán)值 層疊 重要性(!important)
下面小編就為大家?guī)硪黄獪\談CSS 權(quán)值 層疊 重要性(!important)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-05- 這篇文章主要介紹了CSS中的@import,是CSS入門學習中的基礎(chǔ)知識,需要的朋友可以參考下2015-07-14
css中提升優(yōu)先級屬性!important的用法總結(jié)
!important只有Ie7.0和firefox可以識別，但是Ie6.0不能成功應用.!important提升優(yōu)先級，下面對它的用法做下總結(jié)2014-08-08- 這篇文章主要介紹了加了important標記css樣式的jQuery寫法，需要的朋友可以參考下2014-07-16
從可維護性角度考慮css的!important規(guī)則的可用性
使用!important對于性能并沒有什么負面影響。但是從可維護性角度考慮還是少用這個規(guī)則。不過這個規(guī)則在IE6中有bug2014-06-05- 一直以來寫CSS的時候都沒有過多的考慮使用@import的方式,最近又看到有朋友在討論關(guān)于@import的一些好壞，以及要不要使用@import的方式加載樣式,需要的朋友可以了解下2012-12-12
css中l(wèi)ink和@import的區(qū)別分析詳解
本文章詳細的介紹了關(guān)于link和@import的區(qū)別，有需要了解的朋友可以參考一下本文章2012-03-31- 我們引用css文件通常有兩種方式:link,@import 這兩天整理了一下這兩種用法的區(qū)別，加深認識2010-06-17
Webpack 中 css import 使用 alias 相對路徑的方法
在 Vue 項目中，我們通常使用 vue-webpack 腳手架生成工程模板，然后配置 @ 為項目根目錄下放資源和源碼的 /src 目錄的別名。這篇文章給大家介紹Webpack 中 css import 使2018-07-24