CSS
#box div{
color:red;
}
.important_false{
color:blue;
}
.important_true{
color:blue !important;
}
color:red;
}
.important_false{
color:blue;
}
.important_true{
color:blue !important;
}
HTML
<div id="Box">
<div class="important_false">这一行末使用important</div>
<div class="important_true">这一行使用了important</div>
</div>
<div class="important_false">这一行末使用important</div>
<div class="important_true">这一行使用了important</div>
</div>
CSS代码第一行设定了box里面所有div中字体色为红色,第二行和第三行都用class重新定义了自身div的字体色为蓝色,不同的是,第二行末使用important,而第三行使用了!
默认情况下,class的优先级小于id,所以,第二行中即使用class重定义了自身样式,也无法生效,所以继承父级属性,这行字还是红色!
但是,第三行中,用了important提升优先级(或看成强制重定义),所以这里的css得以生效,这行字变为了蓝色!
综上所述 important 可以把某个样式设置成优先级最高
CSS
#box {
color:red !important;
color:blue;
}
color:red !important;
color:blue;
}
HTML
<div id="Box"> 在不同的浏览器下,这行字的色应该不同!</div>
在IE6环境下,这行字是蓝色,在IE7 及firefox下,为红色。这是因为IE6不认important(即不认 !importmant 但是还是认!important前面的color:red),并且color:blue放在color:red的后面(后面的css定义覆盖了前面的 color:red),所以在IE6下字为蓝色;而在IE7及firefox下important级别优先,所以color:red !important;和color:blue;的前后顺序没有关系,在IE7及firefox下red跟blue谁先谁后都没有关系。
转载于:https://blog.51cto.com/boyzhou99/477033