CSS中!important的作用)

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

  {*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 像素的紅框.

這是一個簡單的應用：
<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;
*border:5px solid #f00!important;
border:1px solid #000;
}
</style>
</head>

例一：

CSS

#box {
color:red !important;
color:blue;
}

HTML

<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來指定某個容器的尺寸：
　　#box
　　{
　　　width:100px;
　　　border:5px;
　　　padding:20px;
　　}
　　然後在html中應用：盒的總寬度在幾乎所有瀏覽器中為150像素（100像素寬度+兩條5像素的邊框+兩個20像素的填充），唯獨在IE6之前版本的瀏覽器中仍然為100像素（邊框值和填儲值包含在寬度值中），使用盒模型的hack可以解決這一問題，
　　#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.

!important這個屬性，這個屬性其實也是css規範中的，結果IE6愣是不支援，也正因為它不支援，才讓很多的CSSer們找到瞭解決的方法。一般來講，在css中，如果在同一個css塊中寫下兩個同樣的屬性，那麼其實是按照最下面的來執行的，比如說：

.home{
margin-left:20px;
margin-left:40px;
}

　　那麼在執行的時候其實是按照40px來執行的，!important的出現就是為了讓使用者自己設定被執行語句的優先順序。如果把上面的語句改為：

.home{
margin-left:20px!important;
margin-left:40px;
}

　　那麼在Firefox、google瀏覽器以及IE7以上版本下將會按照20px來執行，而在IE6下卻仍然按照40px來執行，因為IE6並不支援!important規範，我們就可以按照這個規則來滿足IE6的設計需要，什麼時候發現IE6和其他瀏覽器顯示效果不同，那麼就設定兩個，在上面的一個加入!important標記，而下面的一句則不需要添加，這樣IE6就按照下面的來執行了。資深的CSSer說：如今的CSS處處!important。這可都是天殺的IE6惹的禍，大家說IE6就是一坨代謝產物一點也不為過。

CSS定義對於不同瀏覽器的相容性問題一直比較困惑。不管是用div+CSS還是table來進行頁面設計，我對WEB重建的理解是：速度與相容性。即要儘可能提高瀏覽者訪問頁面時瀏覽的速度、要使頁面能儘可能相容不同來訪瀏覽器的瀏覽效果。所以近期的設計都是開啟幾個不同的瀏覽器進行測試，如IE、GoSuRF Browser、Opera和Firefox瀏覽器。測試結果表明，IE和GoSuRF Browser對CSS的支援最好，Opera其次，Firefox要求最高。

　　先看下面的效果：

　　以片是在IE瀏覽器、GoSuRF Browser瀏覽器和Opera瀏覽器中看到的效果：

　　在Mozilla Firefox瀏覽器中看到的效果：

　　其中在IE和GoSuRF Browser瀏覽器瀏覽時的效果基本沒差別，置中正常；Opera瀏覽器中對於這裡置中效果也正常（但對於頁面其他地方就有些問題，這在後面再研究）；在Mozilla Firefox瀏覽器中看到的效果就不同了，置中是對的，但是二邊都沒對齊，抓圖仔細查看了下，二邊多出了5個像素的寬度，並且裡面的縮排量都有問題。

　　先看看CSS中對於中間地區的定義：

#mainall {
width: 760px; height: 300px;
padding: 5px; margin: 0 auto;
background: #fff;
}

　　可能是padding: 5px;這個縮排量Firefox不支援，先測試將“padding: 5px;”改成“padding: 0px;”，儲存後瀏覽，二邊多出了5個像素的寬度就不見了。就是它了。在CSS中再加一句：“padding: 0px !important; ”：

#mainall {
width: 760px; height: 300px;
padding: 0px !important;
padding: 5px; margin: 0 auto;
background: #fff;
}

　　!important的作用是提升指定樣式規則的應用優先權，但IE不支援的值，CSS中即使定義了IE也會忽略這它而選擇按後面的定義執行並顯示，而Opera和Firefox卻會按!important指出的規則優先顯示。看下瀏覽效果：

　　首先二邊對齊的問題解決了。但是右側的div內容卻被擠到下面去了。很可能是寬度不夠的緣故。再看下左右二個div的定義：

/*===中部左側定義開始===*/
#mainbox {
padding:10px; float: left;
width: 495px;
background: #fff;
}
/*===中部右側定義開始===*/
#rightbox {
float: right;
padding: 5px;
width: 250px; height: 100%;
background: #F6F7F9;
}

　　應該是這個狐狸（Firefox）將padding這個補丁邊距的縮排量，不但是只具有縮排效果，並且還讓瀏覽器解析成：整個box的寬度為width＋padding了！暈哦，找到這個原因，解決起來方便些了：將整個box的寬度在Firefox中應該計算為（width－padding）。讓!important來做這個工作吧：

/*===中部左側定義開始===*/
#mainbox {
padding: 0px !important;　/****相容Firefox瀏覽器*****/
padding:10px; float: left;
width: 495px;
background: #fff;
}
/*===中部右側定義開始===*/
#rightbox {
float: right;
padding: 5px;
width: 250px; height: 100%;
background: #F6F7F9;
}

　　再次瀏覽，終於左側上去了，哈哈，應該就是這個問題啦。但是問題又來了，右側怎麼灰色的標題列到邊界外面去了？

　　再看CSS定義：

#rightbox dt {
padding: 3px !important;　/****相容Firefox瀏覽器*****/
padding: 3px; margin: 0px; border: 0px;
width: 100%;
font-weight: normal; font-family:宋體; font-size: 12px; color: #fff;
background: #A6A9AE; text-align: left;
}
#rightbox dd {
padding: 5px !important;　/****相容Firefox瀏覽器*****/
padding: 10px; margin: 0px; border: 0px;
text-align: left;
width: 100%;
font-weight: normal; font-family:宋體; font-size: 12px; line-height: 24px;
}

　　
　　這裡設定了標題#rightbox dt的寬度為100%，測試一下，去掉這個定義就顯示正常了，用相同的手法處理下，加上個定義“width: !important;”，讓Firefox先認識這個定義而丟棄width: 100%的定義即可：

#rightbox dt {
padding: 3px !important;　/****相容Firefox瀏覽器*****/
padding: 3px; margin: 0px; border: 0px;
width: !important;　/****相容Firefox瀏覽器*****/
width: 100%;
font-weight: normal; font-family:宋體; font-size: 12px; color: #fff;
background: #A6A9AE; text-align: left;
}
#rightbox dd {
padding: 5px !important;　/****相容Firefox瀏覽器*****/
padding: 10px; margin: 0px; border: 0px;
text-align: left;
width: !important;　/****相容Firefox瀏覽器*****/
width: 100%;
font-weight: normal; font-family:宋體; font-size: 12px; line-height: 24px;
}

　瀏覽下效果，正常了！

調整前的效果　　　　　　　　　用width: !important後的效果

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More