关于—— !important

定义及语法

!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权。语法格式{ cssRule !important },即

写在定义的最后面,例如:

box{
    color:red !important;
}

 

解释:在box中color为red的优先级最高。

W3c的解释

CSS企图创造一个平衡作者和用户之间的级层样式表。

默认情况下,CSS规则按级层覆盖,例如在.CSS文件中的定义可以被style标签的定义覆盖,反之则不行。

然而,对覆盖平衡而言,加上一个“!important”就优先于正常的CSS规则。

例:

p { text-indent: 1em ! important }

p { font-style: italic ! important }

p { font-size: 18pt }

p { text-indent: 1.5em}

p { font: normal 12pt sans-serif}

p { font-size: 24pt }

注:

Font属性是以上属性的快捷方式,属性如下:

属性名称: 'font'属性值: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]适合对象: 所有元素是否继承: yes百分比备注: 只在font-size使用

例如:

P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif }P { font: x-large/110% "new century schoolbook", serif }P { font: bold italic large Palatino, serif }P { font: normal small-caps 120%/120% fantasy }

在这些规则中 未被覆盖的有:

p { text-indent: 1em ! important }

p { font-style: italic ! important }

p { font-size: 24pt }

浏览器识别

ie7,ie8,firefox,chrome等高端浏览器下,已经可以识别 !important属性, 但是IE 6.0仍然不能完全识别

情况如下:

当含! important的样式属性被同一个{}里的样式覆盖时,IE 6.0认为! important较低

div{
    color:#f00!important;
    color:#000;
}

在上述代码中,IE6及以下浏览器div的文本颜色为#000,!important并没有覆盖后面的规则;其它浏览器下div的文本颜色为#f00覆盖了后面的规则

当 ! important 的样式属性和覆盖它的样式属性单独使用时(不在一个{}里),IE 6.0则认为! important优先级较高,例如:

div{color:#f00!important;}
div{color:#000;}

在上述代码中,IE6及以下浏览器中div的文本颜色表现与其它浏览器一致,都为#f00

总结:

在编写与 ! important 的样式属性有关的样式属性时,建议不在一个{}里编写,而是独立出来,单独另外写,例如:

div{color:#f00!important;}

div{
    color:#000;
    ……
}

猜你喜欢

转载自www.cnblogs.com/caitangbutian/p/11410111.html
今日推荐