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

  • 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. DOM动态脚本和动态样式

    动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...

  2. ASP.NET MVC 4.0中选择Windows 验证默认出错拒绝访问的原因和解决方案

    在VS 2012或者2013 中,根据模板创建一个ASP.NET MVC 4.0的应用程序,选择下面的模板 然后选择Intranet Application 不对源代码做任何修改,直接按下F5调试,会 ...

  3. PackageManager使用

    参考:http://www.linuxidc.com/Linux/2012-02/53072.htm Android系统为我们提供了很多服务管理类,包括ActivityManager.PowerMan ...

  4. HTML5移动Web开发（六）——定义一个内容策略

    通过分析工具搜集到的数据,你可以定义一个内容策略,这对已经有了一个桌面网站的人是非常有用的. 1.确认你已经把分析工具的Javascript代码嵌入到网站中.(http://www.cnblogs.c ...

  5. Network - FTP与SFTP

    FTP --- FTP File Transfer SFTP --- SSH File Transfer 缩写 名称 协议与端口 安全策略 特征描述 守护进程(linux) 应用场景 SFTP SSH ...

  6. 百度，淘宝，腾讯三大巨头HTML页面规范分解

    [兼容html5方案] 百度贴吧,百度图片的实现 <!--[if lt IE 9]> <script> (function(){ var tags = ['header','f ...

  7. java并发编程（3）：ThreadLocal

    转载:http://www.cnblogs.com/dolphin0520/p/3920407.html 一. 对ThreadLocal的理解 ThreadLocal,很多地方叫做线程本地变量,也有地 ...

  8. 自定义视图引擎，实现MVC主题快速切换

    一个网站的主题包括布局,色调,内容展示等,每种主题在某些方面应该或多或少不一样的,否则就不能称之为不同的主题了.每一个网站至少都有一个主题,我这里称之为默认主题,也就是我们平常开发设计网站时的一个固定 ...

  9. php的<?php ?>标签匹配

    在公司实习了没有多久就开始和同事发现了一个问题,就是之前的人写过的项目经常莫名其妙的出错,仔细的看项目的源代码的时候发现项目中并没有逻辑上的错误,而且各种关系以及数据都没有问题,这是为什么呢.再次认真 ...

  10. MSSQLLocalDB 连接字符串 vs2015

    <add key="MSConnectionString" value="Data Source=(localdb)\MSSQLLocalDB;Initial Ca ...