CSS中!important的使用

語法

  • CSS的原理:
    我們知道,CSS寫在不同的地方有不同的優先級, .css文件中的定義 < 元素style中的屬性,但是如果使用!important,事情就會變得不一樣。

  • 語法:
Selector{sRule !important;}

說明:
提升指定樣式規則的應用優先權。


  • 例子:

轉自:http://www.cnblogs.com/yudy/archive/2013/05/27/3102825.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>測試Css中的!Important區別</title> 
</head> 
<style type="text/css">
.testClass{ 
color:blue !important;
}
</style>
<body>
    <div class="testClass" style="color:red;">
        測試Css中的Important
    </div>
</body>
</html>

雖然元素的style中有testClass類的定義,但是在上面的css定義中的用!important限定的定義卻是優先級最高的,無論是在ie6-10或者Firefox和Chrome表現都是一致的,都顯示藍色。

這種情況也同時可以說明ie6是可以識別!important的,只是這個是ie6的一個缺陷吧。如果寫成下面的樣式,ie6是識別不出來的:

.testClass{ 
color:blue !important;
color:red;
}

這樣,在ie6下展示的時候會顯示成紅色。

當然,也可以通過以下方式來讓ie6識別:

.testClass{ 
color:blue !important; 
} 
.testClass{ 
color:red; 
}

通過以上方式也是可以讓ie6顯示成藍色的。

以上實例說明使用!important的css定義是擁有最高的優先級的。只是在ie6下出了一點小的bug,注意書寫方式一般可以輕鬆避開的。


  • 總結:

由於css是採用越接近越優先的原則,同一個定義,比如{margin:2px;margin: 0px;},在IE和firefox中就會解釋成{margin: 0px;};而使用了!important之後,!important對firefox有效,對IE無效,故{margin: 2px !important; margin: 0px;},在firefox中解釋爲{margin:2px;},在IE中解釋爲{margin:2px;}

!important用來讓firefox支持前面的定義,忽略後面的定義;
!important對IE無效,IE依然會採用後面的定義,即後面的定義有效,前面的無效。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章