!important的作用就是提高指定样式属性的优先级。

  一般情况下,我们对同一个元素设置样式属性的时候,对同一个属性设置了两个甚至多个值,像下面这样:

 p { /* 例1 */
color:red;
color:yellow;
color:blue;
}

  这个时候就是后面声明的属性生效,字体显示为蓝色。

  假设我们希望我还像上面这么写,但我希望最终生效字体显示为红色,那我们可以给红色设置!important:

 p { /* 例2 */
color:red !important; /* 设置了优先级 */
color:yellow;
color:blue;
}

  那这个时候字体就会显示为红色。

  如果有多个样式属性设置了!important,像下面这样:

 p { /* 例3 */
color:green !important;  
color:red !important;
color:yellow !important;
color:blue;
}

  那它还是和没设置时一样,最后声明的生效,也就是说上面这个例子最终生效的颜色是黄色。

  

  我们知道,CSS选择器越具体,优先级越高,例如:

 <head>
<style>
p.p1 { color:blue; }
p { color:red; }
</style>
</head> <body>
<p class="p1">p标签</p>
</body>

  最终这个<p>元素显示为蓝色。

  如果我们设置了!important给color:red;

 <head>
<style>
p.p1 { color:blue; }
p { color:red !important; } /* 设置了优先级 */
</style> </head>
<body>
<p class="p1">p标签</p>
</body>

  最终这个<p>元素显示为红色。那如果这个<p>元素设置了内联样式呢?

 <head>
<style>
p { color:red !important; }
</style>
</head>
<body>
<p class="p1" style="color:blue">p标签</p>
</body>

  最终这个<p>元素显示为红色。也就是说声明了!important的样式属性会覆盖其它任何声明。

在Internet Explorer中的 !important

  但在IE 6及更早的版本中,不支持我们这种写法。像例3,在IE5(我用的是IE11然后再控制台中切换到IE5的方式模拟的,IE11没有模拟IE6,凑合凑合_(:з」∠)_)中运行效果是这样的:

  

  没错,最终它还是显示为蓝色,!important被忽略了。让我们换一种写法:

 p { color:blue; }
p { color:yellow; }
p { color:red !important; }/* 设置了优先级 */

  这个时候就可以显示为红色了:

  

  再看看这个例子:

 p { color:blue; }
p {
color:red !important; /* 设置了优先级 */
color:yellow;
}

  在模拟IE5的浏览器中运行效果如下:

  

  个人理解:IE6及更早版本的IE浏览器中运行!important就好比说"大家都是针对这个元素设置的样式,color样式请优先使用我这个CSSRule对象(被{}包裹起来的一些样式属性)中的color样式",而不是说"就使用我指定的color样式"。


参考资料:MDN - 优先级:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity  

CSS 中的 !important 属性的更多相关文章

  1. CSS中的!important属性用法

    关于CSS的运用技巧有很多, 今天主要探讨一下CSS中 !important 这个属性的用法.在CSS的使用中,遇到最多的问题就是不同浏览器之间的兼容问题. 由于IE并不严格执行W3C标准, 而又几乎 ...

  2. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  3. 如何利用 jQuery 修改 css 中带有 !important 的样式属性?

    使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...

  4. css中的!important作用

    css中的!important作用 一.总结 1.!important:是hack, 2.!important作用:让浏览器首选执行这个语句,当对同一个对象设置了多个同类型的属性的时候,首选执行这一个 ...

  5. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  6. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  7. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  8. CSS中的display属性

    CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...

  9. 举例详解CSS中的cursor属性

    这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...

随机推荐

  1. linux 普通用户批量创建账户与密码

    #!/bin/bash # add user imp - # by imp # ) do useradd imp$i echo "$i" |passwd --stdin imp$i ...

  2. PAT A1020

    PAT A1020 标签(空格分隔): PAT #include <cstdio> #include <queue> using namespace std; const in ...

  3. servlet操作本地文件汇总: 判断文件是否存在;文件重命名;文件复制; 获取文件属性信息,转成Json对象; 获取指定类型的文件; 查找替换.txt中的文本

    package servlet; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; ...

  4. hive lock命令的使用

    1.hive锁表命令 hive> lock table t1 exclusive;锁表后不能对表进行操作 2.hive表解锁: hive> unlock table t1; 3.查看被锁的 ...

  5. 【javascript小案例】从0开始实现一个俄罗斯方块

    写在前面得话: 这篇文章主要记录了我是怎么一步一步写出俄罗斯方块,整个代码用的函数编程,主要是为了让一些不熟悉es6, 面向对象写法得 新手能更容易看明白,全部得代码中都是一些js的基础知识,很容易理 ...

  6. centos 系统上如何把python升级为3

    第一种方式: SCL 源目前由 CentOS SIG 维护,除了重新编译构建 Red Hat 的 Software Collections 外,还额外提供一些它们自己的软件包. 该源中包含不少程序的更 ...

  7. FUJI 富士 富仕 串口 N500I N700I 连接

    本人丰富的硬件连接经验, 1.出售富士生化设备N500I, N700I 接入,C#代码demo,  可连接机器验证,验证后付款2. 提供宠物行业富士生化设备N500I, N700I型号接入软件技术支持 ...

  8. C语言求1-1/3+1/5-1/7+...——小程序,大道理

    问题:用C语言编写程序求1-1/3+1/5-1/7+... 示例: #include <stdio.h> void main(){ ; ,a=; ){ sum=sum+n/a; n=-n; ...

  9. TP5 生成二维码

    首先下载这个类:http://phpqrcode.sourceforge.net/ 把下载的文件放到vendor下面 public function getWchatQrcode($users_id= ...

  10. 微信小程序调用快递物流查询API的实现方法

    一. 创建index.wxml.index.wxss.index.js 附上代码: <view class='container'> <input class='info' plac ...