您的位置:首页> 前端教程> CSS教程
文章导航

CSS !important

2018-10-30 15:24| 作者: admin| 查看: 1002| 评论: 0|来自: 蚂蚁部落

人微言轻,不同身份的人受到的待遇是不同的。

同样一句话,VIP人士口中说出,可能得到很好的贯彻,从普通人口中说出可能约等于pi。

在CSS中同样如此,被标记为高权重的声明会盖过普通声明。

!important就如同一个VIP标签,被贴上此标签CSS声明将获得高权重。

语法结构:

[CSS] 纯文本查看 复制代码
selector{declaration !important;}

参数解析:

(1).selector:CSS选择器。

(2).declaration:CSS声明。

代码片段演示如下:

[CSS] 纯文本查看 复制代码
#antzone{
  width:150px;
  height:100px;
  background-color:green!important;
}

代码分析如下:

(1).background-color:green本条规则已经被贴上了"VIP"标签。

(2).此标签是由一个叹号和important构成!important。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:150px;
  height:100px;
  background-color:green !important;
}
#antzone{
  background-color:blue;
}
</style> 
</head> 
<body> 
<div id="antzone"></div>
</body> 
</html>

通常情况下,CSS有如下两个特点:

(1).CSS后面的声明会覆盖前面的声明。

(2).高权重选择器中的声明要覆盖低权重选择器中声明。

但是加上!important之后,就可以无视上面两个规则,毕竟我是"VIP人士"。

所以上面代码中的div元素背景颜色将会呈现蓝色,而不是绿色。

IE6兼容性问题

关于IE6兼容性问题的介绍可能有点多此一举,因为IE6浏览器几乎已经销声匿迹。

有不少教程认为IE6不支持!important,这个结论是错误的。

IE6同样支持此规则,但是有一点怪异现象,不过很容易解决。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
.ant{color:red!important} 
.ant{color:blue;} 
</style> 
</head> 
<body> 
<div class="ant">蚂蚁部落</div> 
</body> 
</html>

上述代码在IE6的表现完全没有问题,div背景色会被设置为红色,而不是蓝色。

将代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
.ant{
  color:red!important;
  color:blue;
} 
</style> 
</head> 
<body> 
<div class="ant">蚂蚁部落</div> 
</body> 
</html>

IE6下,div会被设置为蓝色,也就是说如果相同的声明位于同一个代码块中,VIP标签也不管用。

将它们分开就没有问题了,如果有IE6需要的朋友可以注意一下。

 !important使用原则:

  要谨慎使用 !important,因为它实在太强,权重太高。

一不小心就会影响到其他的样式效果,使用原则如下:

(1).不要在全局使用此效果,而是要在小局部覆盖全局或者外部引入样式时使用。

(2).不要在插件中应用,它的权重太高,以免对页面其他样式产生影响,或者给使用者带来不便。

(3).不推荐使用 !important,推荐使用其他CSS优先级方式解决问题。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS 元素选择器下一篇:CSS E::selection

最新评论

返回顶部