WonderCSS

CSS 中的优先权 !important

在CSS样式表中经常会出现的一些“古怪代码”中,之前我们知道了有“亲儿子”一说,那么今天我们要认识下“VIP”了。如下面的代码:


h3#title {
     color:#000 !important;
}

在样式表中我们看到了很突出的红色标记属性 !important ,important意为“重要的”意思。先来看下 W3C 官方解释:

CSS企图创造一个平衡作者和用户之间的级层样式表。
默认情况下,CSS规则按级层覆盖,例如在.CSS文件中的定义可以被style标签的定义覆盖,反之则不行。
然而,对覆盖平衡而言,加上一个“!important”就优先于正常的CSS规则。

正如我们所了解的那样,在同一个页面,同一个标签先后出现多次时,后读取的属性覆盖前面的属性。比如在样式表里已经定义了 h3#title 的颜色为黑色:


h3#title {
     color:#000;
}

但我们在html代码里有给它赋予了颜色为红:


<h3 id="title" style="color:#f00;">Wonder CSS Page</h3>

那么后赋予的 color 值 #f00 将覆盖 CSS样式表里的 #00 ,“Wonder CSS Page” 显示为红色。如果我们在 html 代码不做改动的情况下,坚持让它显示为样式表里的黑色的话,那么就需要使用 !important 来提高 CSS 中属性的权重了。

!important 属性不被 IE6 识别,这也可以将它使用到另一个用途上:单独为IE6赋值以达到兼容IE6这个破烂版本。

值得一提的是在做响应式布局中 !important 扮演很重要的角色!

By 于湛 发布于 2013.03.4 4,403 次浏览

CSS 中的优先权 !important》上有1条评论

  1. Pingback引用通告: 去除 DedeCMS 列表页推荐文章标题加粗效果 | WonderCSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注