CSS

#box div{
     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>

    CSS代码第一行设定了box里面所有div中字体色为红色,第二行和第三行都用class重新定义了自身div的字体色为蓝色,不同的是,第二行末使用important,而第三行使用了!

    默认情况下,class的优先级小于id,所以,第二行中即使用class重定义了自身样式,也无法生效,所以继承父级属性,这行字还是红色!

    但是,第三行中,用了important提升优先级(或看成强制重定义),所以这里的css得以生效,这行字变为了蓝色!

    综上所述 important 可以把某个样式设置成优先级最高

 

CSS

#box {
     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谁先谁后都没有关系。