!important 和 * ----hack
{*rule !important}這個css規則當今在網頁製做的時候的普及已經很是流行了，之前我對它的理解就停留在‘瀏覽器是否識別階段’ 而沒有真正去研究過，但是如今發生了變化。衆所周知，!important這個規則對Ie6.0,Ie7.0和Firefox能寫hack，如今就來說解 這是什麼原理： css
*對於Ie系列瀏覽器都可以識別， firefox 瀏覽器則不能識別; html
!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; ui
在(1)中，之因此把*放在後面是由於ff不識別*而致使只對它設置了一次border;而ie 系列進行了兩次border設置後，後一個屬性覆蓋了前一個屬性，故爲一像素的邊框。 spa
在(2)中，之因此把!important放在第一個border 設置，是由於它把此次border的優先級提升了，即便後面在一次甚至在N次設置border 也無效，可是Ie6.0對這個規則不接受，而致使它應用了第二次的border 設置，也就是第二次覆蓋了第一次的這一原理， 並非它不識別!important;因此它的border爲2 像素的紅框. firefox
這是一個簡單的應用： code
View Code
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style type="text/css"> div{ width:800px; height:250px; background-color:yellow!important;/*提高指定樣式規則的應用優先權*/ background-color:red; border:3px solid #000!important;/*firefox*/ *border:5px solid #f00!important;/*Ie7.0*/ border:1px solid #000;/*Ie6.0*/ } </style> </head> </html>
例一： htm
CSS blog
1 #Box { 2 color:red !important; 3 color:blue; 4 }
HTML
1 <div id="Box"> 在不一樣的瀏覽器下，這行字的色應該不一樣！</div>
這個例子應該是你們常常見到的important的用法了，在IE環境下，這行字是藍色，在firefox下，爲紅色，其用法再也不多說了，看下一個例子。
例二：
CSS
1 #Box div{ color:red; } 2 .important_false{ color:blue; } 3.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來指定某個容器的尺寸：
1 #box 2 { 3 width:100px; 4 border:5px; 5 padding:20px; 6 }
而後在html中應用：盒的總寬度在幾乎全部瀏覽器中爲150像素（100像素寬度+兩條5像素的邊框+兩個20像素的填充），惟獨在IE6以前版本的瀏覽器中仍然爲100像素（邊框值和填充值包含在寬度值中），使用盒模型的hack能夠解決這一問題，
View Code
#box { width:150px; //這個是錯誤的width，全部瀏覽器都讀到了 voice-family: \}\; //IE5.X/win忽略了\}\後的內容 voice-family:inherit; width:100px; //包括IE6/win在內的部分瀏覽器讀到這句，新的數值(300px)覆蓋掉了舊的 } 還有更簡單的辦法以下： CSS: #box { width:150px; } #box div { border:5px; padding:20px; } HTML: ...
這樣一來在任何瀏覽器中盒的總寬度都將是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.
- 1. CSS !Important及感嘆號(!) hack的應用
- 2. link 和 @important 的區別
- 3. CSS Hack
- 4. CSS hack
- 5. css hack
- 6. Important Time
- 7. height:auto !important;
- 8. CSS HACK
- 9. IE hack
- 10. ie8 hack
- 更多相關文章...
- • XLink 和 XPointer 語法 - XLink 和 XPointer 教程
- • Kotlin 類和對象 - Kotlin 教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS !Important及感嘆號(!) hack的應用
- 2. link 和 @important 的區別
- 3. CSS Hack
- 4. CSS hack
- 5. css hack
- 6. Important Time
- 7. height:auto !important;
- 8. CSS HACK
- 9. IE hack
- 10. ie8 hack