CSS 中的 !important 属性
!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 属性的更多相关文章
- CSS中的!important属性用法
关于CSS的运用技巧有很多, 今天主要探讨一下CSS中 !important 这个属性的用法.在CSS的使用中,遇到最多的问题就是不同浏览器之间的兼容问题. 由于IE并不严格执行W3C标准, 而又几乎 ...
- 使用jquery修改css中带有!important的样式属性
当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...
- 如何利用 jQuery 修改 css 中带有 !important 的样式属性？
使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...
- css中的!important作用
css中的!important作用 一.总结 1.!important:是hack, 2.!important作用:让浏览器首选执行这个语句,当对同一个对象设置了多个同类型的属性的时候,首选执行这一个 ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- CSS中的display属性
CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...
- 举例详解CSS中的cursor属性
这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...
随机推荐
- SQL-55 分页查询employees表，每5行一页，返回第2页的数据
题目描述 分页查询employees表,每5行一页,返回第2页的数据CREATE TABLE `employees` (`emp_no` int(11) NOT NULL,`birth_date` d ...
- python笔记18-高阶函数
高阶函数: 如果一个函数的入参是一个函数名的话,那这个函数就是一个高阶函数 函数即变量 # def hello(name):# print(name)# new_hello = hello#hello ...
- Map集合练习题
(Map)已知某学校的教学课程内容安排如下: 完成下列要求:1) 使用一个Map,以老师的名字作为键,以老师教授的课程名作为值,表示上述课程安排.2) 增加了一位新老师Allen 教JDBC3) Lu ...
- enquire.js-响应css媒体查询的轻量级javascript库
轻量,没有依赖. 安装: npm install enquire.js API: enquire.register(mediaQuery, handler). mediaQuery: 字符串,需要响应 ...
- ionic2中使用datetime组件如何默认设置当前时间？
HTML: <ion-item> <span item-left style="min-height: 27px;">存款日期/时间</span> ...
- Unity more efficient find
Unity caches GameObjects based on their tags, so in a big scene with lots of objects, GameObject.Fin ...
- java知识点总结----java入门(1)
1.首先的明白什么是java? 1.java是一门编程语言 2.java是开发环境 3.java是运行环境 2.java概况--java构架 1.J2SE (Java2 Standard Editio ...
- Python第七章（北理国家精品课 嵩天等）
7.1文件的使用 1.1文本类型 文本文件:由单一特定编码组成的文件,如.txt 二进制文件:如.png,.avi 1.2文件的打开和关闭 打开-操作-关闭 <变量名> = open(&l ...
- shell中关于file的判断（转载）
-e filename 如果 filename存在,则为真 [ -e /var/log/syslog ]-d filename 如果 filename为目录,则为真 [ -d /tmp/mydir ] ...
- mknod语法
1.语法 mknod [选项] 设备名 设备类型 主设备号 次设备号 2.选项参数列表 选项 说明 --version 显示命令版本信息 --help 显示帮助信息 -m | - ...