!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明,包括这个样式的属性和属性值
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>测试!Important</title> </head> <style type="text/css"> #Box div { color: red; } .important_false { color: blue; } .important_true { color: blue !important; } </style> <body> <div id="Box"> <div class="important_false"> 这一行末使用important</div> <div class="important_true"> 这一行使用了important</div> </div> </body> </html>
效果:
CSS代码第一行设定了box里面所有div中字体色为红色,第二行和第三行都用class重新定义了自身div的字体色为蓝色,
不同的是,第二行未使用!important,而第三行使用了!
总结:
第一行字体颜色是红色,可以证明,css样式设置中,id的优先级大于class,这行字还是红色。
第二行字体颜色是蓝色,可以证明,!important的优先级最高,important_true的css样式生效,这行字变为了蓝色!
特别说明:
!important在IE6中是不被识别的,例:
.testClass{ color:blue !important;
color:red; }
这种写法在IE6下是识别不到的,.testCalss最后显示为红色,但也可以通过更改下写法让IE6识别到!important
.testClass{ color:blue !important; } .testClass{ color:red; }