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设置三角形
- 下一篇： aspose.words 表格内容水平居