!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. 如何使用VMware安装rhel6.4操作系统（详细步骤）

    第一步,打开VMwareWorkStation11创建新的虚拟机.如下图所示. 第二步,点击文件,然后选新建虚拟机.,新建虚拟机向导,选择自定义. 第三步,选择虚拟机硬件兼容性.选择WorkStati ...

  2. PAT B1013

    PAT B1013 标签(空格分隔): PAT 解法:埃氏筛法 注意点: 1. 由于不知道第n个素数有多大,所以要用一个大的数组来储存结果. 2. 注意输出格式,末尾不能有多余空格 #include ...

  3. js获取元素属性值为空的原因和解决办法

    问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...

  4. shell练习题7

    需求如下: 输入一串随机数字,然后按千分位输出. 例如:输入随机数字为"123456789",输出为123,456,789 参考解答如下 -方法1 [root@lanquark s ...

  5. python异常（概念、捕获、传递、抛出）

    异常 目标 异常的概念 捕获异常 异常的传递 抛出异常 01. 异常的概念 程序在运行时,如果 Python 解释器 遇到 到一个错误,会停止程序的执行,并且提示一些错误信息,这就是 异常 程序停止执 ...

  6. MySQL数据库语句

    一 . 常用mysql命令行命令        1 .启动MYSQL服务   net start mysql 停止MYSQL服务   net stop mysql 2 . netstat –na | ...

  7. 《多线程操作之生产者消费者》（单生产单消费&多生产多消费）

    说明1:假设有一个放商品的盘子(此盘子只能放下一个商品).生产者每次生产一个商品之后,放到这个盘子里,然后唤醒消费者来消费这个面包.消费者消费完这个商品之后,就唤醒生产者生产下一个商品.前提是,只有盘 ...

  8. 互动科技 快乐分享 X/Open DTP——分布式事务模型

    这一几天一直在回顾事务相关的知识,也准备把以前了解皮毛的知识进行一些深入总结,虽然这一些知识并没有用到,但是了解其实现原理还是很有必要的,因为知道了原理,你也能把它实现出来. 在上一节事务的编程模型里 ...

  9. python笔记2——关于列表的使用

      一.列表的一些基本用法 names=["XiaoNaiyou", "XiaoNan", "WeiZhen", "WuCheng ...

  10. 在Linux服务器上使用Vbox安装虚拟机

    先去官网(www.virtualbox.org)上下载对应Linux系统的Vbox版本. 我这边用的是Oracle Linux 7系统(KDE安装) 使用rpm安装virtualbox 发现报错,按照 ...