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>
雖然元素的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属性修改权重的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css设置三角形
- 下一篇： -ms-,-moz-,-webkit-,