CSS的!important屬性修改權重_其它

最近在做專案中發現很多CSS程式碼裡面都使用!important去覆蓋原有高優先順序的樣式。按照常理來說，越是靈活的東西，需要做的工作就會更多所以就寫一篇部落格梳理下!important屬性。

1.定義及語法

語法格式：{ cssRule !importan}，例如：box{color:red !important;}。

作用：提高指定樣式規則的應用優先權（優先順序）在CSS中，通過對某一樣式宣告! important ，可以更改預設的CSS樣式優先順序規則，使該條樣式屬性宣告具有最高優先順序。

2.瀏覽器識別

IE7及IE7+,Firefox,chrome等瀏覽器下，已經可以識別 !important屬性，但是IE6.0、IE6及更早瀏覽器下仍然不能完全識別。!important的樣式屬性和覆蓋它的樣式屬性單獨使用時(不在一個{}裡)，IE 6.0認為! important優先順序較高，否則當含! important的樣式屬性被同一個{}裡的樣式覆蓋時，IE 6.0認為! important較低!

3.由於!important的樣式屬性和覆蓋它的樣式屬性單獨使用時需要不在一個{}裡所以就有下面情況：

首先，先看下面一段程式碼：

<!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>

CSS的!important屬性修改權重

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

這種情況也同時可以說明ie6是可以識別!important的，但是有一種情況IE6是識別不出來的，但是 IE7及IE7+,Firefox,chrome等瀏覽器是可以識別的。

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

這樣情況下!important屬性，在ie6下展示的時候會顯示成紅色。

當然，也可以通過以下方式來讓ie6識別：

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

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

以上例項說明使用!important的css定義是擁有最高的優先順序的。只是在ie6下出了一點小的bug，所以我們在使用!important屬性的時候，需要注意書寫方式。

4.總結一下

1.!important會修改當前對應元素的當前css屬性和值得權重

2.!important指定的屬性權重比class選擇器，ID選擇器，內聯樣式的權重都高。

3.!important只對當前元素當前屬性權重有影響，對子元素權重沒影響

4.如果在在不懂選擇器中，相同屬性和值都指定了!important，選擇器權重高的屬性起作用
5.注意書寫方式

CSS的!important屬性修改權重

相關推薦