提升指定样式规则的应用优先权。

  • IE6及以下浏览器有个比较显式的支持问题存在，!important在同一条规则集里不生效。请看下述代码：

    示例代码：

    div { color: #f00 !important; color: #000; }

    在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00

  • IE6及以下浏览器要使!important生效，可用以下代码：

    示例代码：

    div { color: #f00 !important; } div { color: #000; }

    在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00

　　IE6及更早浏览器下，!important在同一条规则集内不生效。

示例：

 <!DOCTYPE html>

 <html>

   <head>

     <title>important的使用</title>

     <meta name="content-type" content="text/html; charset=UTF-8">

 <style>

 .button {

     position: relative;

     background-color: #4CAF50;

     border-radius:8px;

     font-size: 28px;

     color: #FFFFFF;

     padding: 20px;

     width: 200px;

     text-align: center;

     transition-duration: 1.5s;

     overflow: hidden;

     cursor: pointer;

   }

   .button:hover{

     box-shadow:0 4px 8px 0 rgba(0,0,0,0.1),0 6px 20px 0 rgba(0,0,0,0.299);

   }

   .button:after {

     content: "";

     background: #90EE90;

     display: block;

     position: absolute;

     padding-top: 300%;

     padding-left: 350%;

     margin-left: -20px!important;

     margin-top: -120%;

     opacity: 0;

     transition:1s;

 }

 .button:active:after {

     padding: 0;

     margin: 0;

     opacity: 1;

     transition:0s;

 }

 </style>

 </head>

 <body>

 <button class="button">Click Me</button>

 <p>第31行的margin-left设置了!important，因此后面的第39行是不能更改margin-left的值。

 </body>

 </html>

参考文章：

http://www.runoob.com/css3/css3-buttons.html

http://www.css88.com/book/css/rules/!important.htm

本文为博主原创文章，若需转载请注明出处。

CSS中!important的作用的更多相关文章

  1. 转：css中!important的作用

    转:http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html {*rule !important}这个css规则当今在网页制作的 ...

  2. css中!important的优先级问题

    css中!important的优先级在主页面中写>在外部引用的css文件 之前我一直以为css的样式不管写在哪里只要加上!important那么它的优先级就是最高的,事实上并不是这样的,尤其在动 ...

  3. css 中 important 的用法

      css 中 important 的如何使用?  important对 一个良好(或者是标准)的浏览器来说,不仅仅是从顺序上提升代码的优先级,还可以用来提升class的优先级(比如firefox), ...

  4. CSS中"!important"的使用

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...

  5. CSS中!important的优先级

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...

  6. CSS中!important的使用 转

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22::) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素 ...

  7. Css中!important的用法

    !important为开发者提供了一个增加样式权重的方法.应当注意的是!important是对整条样式的声明,包括这个样式的属性和属性值 <!DOCTYPE HTML> <html& ...

  8. css中!important的用法总结

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. CSS3 nth-child的使用，详解css中nth的作用，以及nth-child的兼容写法

    :nth-child是css3的一个比较常用的选择器.它用于匹配属于其父元素中的子元素,不论元素的类型. 它的参数可以是数字.关键词或公式.下面讲介绍它的使用方法, nth-child的使用 html ...

随机推荐

  1. vc操作windows防火墙的方法

    收藏该地址,以备不时之需. http://msdn.microsoft.com/en-us/library/aa364726.aspx

  2. HTML的音频和视频

    目录 [1]媒体格式 音频格式 视频格式 [2]元素 插件元素 HTML5元素 [3]HTML音频 [4]HTML视频 前面的话 多媒体元素(比如视频和音频)存储于媒体文件中,确定媒体类型的最常用的方 ...

  3. python--基础学习（二）判断 、循环、定义函数、继承、调用

    1.判断 if.elif 代码示范 # coding=utf-8 score = 90 if (score>=90): print("完美") print("优秀& ...

  4. Furatto – 轻量，友好的响应式前端开发框架

    Furatto 是一个基于 Bootstrap & Foundation 的前端开发框架,用于快速开发网站.这个框架采用流行的扁平化设计和响应式设计.除了布局和网格之外,所有的主要元素都有预定 ...

  5. c#字符串操作方法实例

    # 字符串是使用 string 关键字声明的一个字符数组.字符串是使用引号声明的,如下例所示: string s = "Hello, World!"; 字符串对象是“不可变的”,即 ...

  6. java设计模式学习（-）

    在我目前看来博客的作用就是笔记了,所谓的原创也仅仅是复制了别人的东西实践了一下,但为了学习记忆确实要记录下来.在这里感谢网络各处的资源,原谅我对资源的索取. 接下来每天开始学以则设计模式或者几天学一则 ...

  7. 在SQL Server 2014里，如何用资源调控器压制你的存储？

    在今天的文章里,我想谈下SQL Server 2014里非常酷的提升:现在你终于可以根据需要的IOPS来压制查询!资源调控器(Resource Governor)自SQL Server 2008起引入 ...

  8. SQL Server代理(7/12)：作业活动监视器

    SQL Server代理是所有实时数据库的核心.代理有很多不明显的用法,因此系统的知识,对于开发人员还是DBA都是有用的.这系列文章会通俗介绍它的很多用法. 在这个系列的前几篇文章里,你创建配置了SQ ...

  9. C#--析构函数

  10. SQL--Having

    Having--对分组信息进行过滤,因为分组之后的信息和原来的表信息没有关系了, Having可以用的之后,出现在Group子句中的列,还有聚合函数   SELECT s_Age ,COUNT(s_I ...