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" >
测试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;
cssclass属性
}
通过以上⽅式也是可以让ie6显⽰成蓝⾊的。
以上实例说明使⽤!important的css定义是拥有最⾼的优先级的。只是在ie6下出了⼀点⼩的bug，所以我们在使⽤!important属性的时候，需要注意书写⽅式。
4.总结⼀下
1.!important会修改当前对应元素的当前css属性和值得权重
2.!important指定的属性权重⽐class选择器，ID选择器，内联样式的权重都⾼。
3.!important只对当前元素当前属性权重有影响，对⼦元素权重没影响
4.如果在在不懂选择器中，相同属性和值都指定了!important，选择器权重⾼的属性起作⽤
5.注意书写⽅式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。