您现在的位置: 365建站网 > 365学习 > css中!important的属性和用法

css中!important的属性和用法

文章来源:365jz.com     点击数:175    更新时间:2018-06-02 11:20   参与评论

!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明,包括这个样式的属性和属性值

<style type="text/CSS">
a{color:green!important;}
#main a{ color:blue;}
</style>


<div id="main">
<a>!important实例</a>
</div>

对于上面的代码,如果不加important特性,则超链接的颜色为蓝色,但是加上important之后优先级提高了,显示颜色为绿色。

<style>
#Box div{
     color:red;
}
.important_false{
     color:blue;
}
important_true{
     color:blue !important;
}
</style>


<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得以生效,这行字变为了蓝色!

另外有一个值得注意的地方,如果样式这样写:

.testClass{ 
color:blue !important; color:red;
}

这种写法在IE6下是识别不到 !important显示为红色,但也可以通过一下方法让IE6识别到!important

这个属性是CSS规范中的,但IE6不支持,也正是因为它不支持,才让人找到了解决IE6和别的浏览器不兼容问题的办法。

      一般来说,在CSS中,如果在同一个CSS块中写两个相同的属性,那么是按照后出现的来执行的,比如:

.body{

    margin-left:20px;

    margin-left:40px;

}

      那么在执行的时候其实是按照40px执行的,!important的出现就是为了让用户自己设置被执行语句的优先级。如果把上面的语句改为:

.body{

    margin-left:20px!important;

    margin-left:40px;

}

或者

!important.body{

    margin-left:20px;

    margin-left:40px;

}

      那么在火狐、google浏览器以及IE7以上版本将会按照20px来执行,而在IE6下仍按照40px来执行,因为IE6并不支持!important规范,我们可以按照这个规则来满足IE6的设置需要,什么时候发现IE6和其他浏览器显示效果不同,那么就设置两个,在上面的一个加入

!important标记,而下面的语句不需要添加,这样IE6就按照下面的来执行了。

.testClass{ 
color:blue !important; 
} 
.testClass{ 
color:red; 
}
这里有个简单的例子代码,它清楚的演示了!important 如何影响应用它的样式的原本方式:

#example {
       font-size: 14px !important;
}
#container #example {
       font-size: 10px;
}

在上面的例子代码中,id为“example”的元素的文本大小为14px,这是因为补充了 !important。若若是没有使用!important,第二个声明块本来会比第一个有更高的权重,出于以下两个原因: 第二个声明块在样式表的后面部分。而且,第二个声明块更加明确。(#container 后面的#example ,而不仅仅是#example)。但是,由于!important的接入,第一个font-size 规则变得更有权重。

关于!important 声明,有几点需要注意:

在!important 首次引入in CSS1时,带有!important 声明的作者规则比带有!important 声明的用户规则有着更高权重;为了改进可接入性,这一规则在CSS2 中被调换过来。
如果在复合属性中使用 !important ,它会为其代表的所有的子属性添加权重。
!important 关键字(或语句)必须置于行末,正好位于分号前面,否则会不起作用(尽管分号前有一个空格不会打断它)
如果出于特别原因,你必须在同一个声明块中书写某一个属性两次,那么在第一个结尾处添加!important ,它就在除了IE6之外的所有浏览器肿拥有更高的权重。(这是针对IE6的破解,但不会让你的CSS非法)
在IE6 和IE7中,如果你使用其他的词来替代!important (如 !hotdog),CSS规则也会被基于额外权重,而其他的浏览器则会忽略它。
何时该用!important ?

无论何种技术,在特定环境下总是有利有弊。那么,如果需要的话,什么时候使用呢?这里是我对潜在的有效使用的主观概述。


如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (175人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------