!important的用法及作用


定義及語法

  !important,作用是提高指定樣式規則的應用優先權(優先級)。語法格式{ cssRule !important },即寫在定義的最后面,例如:box{color:red !important;}。

  在CSS中,通過對某一樣式聲明! important ,可以更改默認的CSS樣式優先級規則,使該條樣式屬性聲明具有最高優先級。

瀏覽器識別 

    ie7及ie7+,firefox,chrome等瀏覽器下,已經可以識別 !important屬性, 但是IE 6.0IE6及更早瀏覽器下仍然不能完全識別。important的樣式屬性和覆蓋它的樣式屬性單獨使用時(不在一個{}里),IE 6.0認為! important優先級較高,否則當含! important的樣式屬性被同一個{}里的樣式覆蓋時,IE 6.0認為! important較低!
   
案例分析
    IE6及以下瀏覽器有個比較顯式的支持問題存在,!important在同一條規則集里不生效。請看下述代碼:
div {!important; color: #000; }
//在上述代碼中,IE6及以下瀏覽器div的文本顏色為#000,!important並沒有覆蓋后面的規則;ie7、ie7+、及其它瀏覽器下div的文本顏色為#f00。

   

    IE6及以下瀏覽器要使!important生效,可用以下代碼:

 

div { color: #f00 !important; }
div { color: #000; }
//上述代碼中,ie6及其以下瀏覽器div的文本顏色為#fff,后面的重寫的div樣式沒有起作用,important的樣式屬性和覆蓋它的樣式屬性單獨使用時(不在一個{}里),IE 6.0認為!important優先級較高, 可以識別!important。

 

提高指定樣式規則的應用優先權(優先級)

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>!important</title>
</head>
<style type="text/css">
	#test p{
		color: #000;
	}
	.fontstyle{
		color:#00FF00 !important;
	}
</style>
<body>
	<div id="test">
		<p class="fontstyle">樣式帶有!important的元素優先級最高</p>
	</div>
</body>
</html>   //.fontstyle樣式使用了!important,所以有優先級最高,覆蓋掉#test p的color樣式

 

 總結實例

*IE都能識別;標准瀏覽器(如FF)不能識別*

 

!important只有Ie7.0和firefox可以識別,但是Ie6.0不能成功應用.

(一)區別ie與標准瀏覽器(如FF)的hack為:border:2px solid #f00;*border:1px solid #f00;   //如果*定義的樣式放前面會被后面的樣式給覆蓋掉,因為*不能提高樣式的優先級

(二)區別Ie6.0 與Ie7.0、firefox的hack為:border:1px solid #f00!important;border:2px solid #f00;  //!imorpant則可以提高樣式的優先級,所以可以放前面定義。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM