!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. jenkins+svn 打包部署上传服务器并正常运行项目，从安装到使用

    以前写过一个版本,jenkins打包部署的全果然,然后...没保存,现在重新写一个版本从按照开始. 项目平时部署情况,svn拉代码,开发打包后进行给测试,测试上传到跳板机,杀掉以前项目进程,上传到服务 ...

  2. python中对文件、文件夹，目录的基本操作

    一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()2.返回指定目录下的所有文件和目 ...

  3. 机器学习之朴素贝叶斯&贝叶斯网络

    贝叶斯决决策论       在所有相关概率都理想的情况下,贝叶斯决策论考虑基于这些概率和误判损失来选择最优标记,基本思想如下: (1)已知先验概率和类条件概率密度(似然) (2)利用贝叶斯转化为后验概 ...

  4. git 命令提交项目到github

    git 命令提交项目到github步骤如下: 1.使用git 命令客户端进入项目根路径,输入 git init  命令,创建github本地根目录 2.把文件加入到本地项目 git add .  ,如 ...

  5. 通过重写request.getParameter方法来解决中文乱码问题。

    在原生servlet的商城项目中,BeanUtils.populate方法封装不上注册的参数. 已知BeanUtils.populate方法是封装不上date对象的,于是自定义了一个转换器用来封装Da ...

  6. zookeeper 启动 zookeeper_server.pid: Permission denied

    在启动zookeeper的时候 报错 没有权限 以为是 zookeeper 没有权限 然后 chmod -R 777 zookeeper/ 之后还是不行. 后来 才发现 原来是我 /tmp/zooke ...

  7. shell中关于file的判断（转载）

    -e filename 如果 filename存在,则为真 [ -e /var/log/syslog ]-d filename 如果 filename为目录,则为真 [ -d /tmp/mydir ] ...

  8. linux之特殊字符

    特殊字符: 与路径和位置有关的特殊字符: ~  用户的家目录,超级用户为/root _  用户(-) 代表上一次用户所在路径 .代表当前目录(. 还有很多其他含义) ..代表上一级目录 通配符 *匹配 ...

  9. lvm语法2

    LVM组成; LVM:logic volume manager .LVM即逻辑卷管理,现在使用版本为第二版,即version2 逻辑卷:pv,physical volume,即计算机上的磁盘设备,例如 ...

  10. 深度学习（PYTORCH）-2.python调用dlib提取人脸68个特征点

    在看官方教程时,无意中发现别人写的一个脚本,非常简洁. 官方教程地址:http://pytorch.org/tutorials/beginner/data_loading_tutorial.html# ...