本篇文章使用最新的IE10以及firefox与chrome测试（截止2013年5月27日22:23:22）

CSS的原理：

我们知道，CSS写在不同的地方有不同的优先级， .css文件中的定义 < 元素style中的属性，但是如果使用!important，事情就会变得不一样。

首先，先看下面一段代码：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>测试Css中的!Important区别</title>
  6. </head>
  7. <style type="text/css">
  8. .testClass{
  9. color:blue !important;
  10. }
  11. </style>
  12. <body>
  13.     <div class="testClass" style="color:red;">
  14.         测试Css中的Important
  15.     </div>
  16. </body>
  17. </html>

虽然元素的style中有testClass类的定义，但是在上面的css定义中的用!important限定的定义却是优先级最高的，无论是在ie6-10或者Firefox和Chrome表现都是一致的，都显示蓝色。

这种情况也同时可以说明ie6是可以识别!important的，只是这个是ie6的一个缺陷吧。如果写成下面的样式，ie6是识别不出来的：

  1. .testClass{
  2. color:blue !important;
  3. color:red;
  4. }

这样，在ie6下展示的时候会显示成红色。

当然，也可以通过以下方式来让ie6识别：

.testClass{
color:blue !important;

}

.testClass{

color:red;

}

通过以上方式也是可以让ie6显示成蓝色的。

以上实例说明使用!important的css定义是拥有最高的优先级的。只是在ie6下出了一点小的bug，注意书写方式一般可以轻松避开的。

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

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

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

  2. css 中 important 的用法

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

  3. CSS中!important的作用

    提升指定样式规则的应用优先权. IE6及以下浏览器有个比较显式的支持问题存在,!important在同一条规则集里不生效.请看下述代码: 示例代码: div { color: #f00 !import ...

  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::) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素 ...

  6. Css中!important的用法

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

  7. 转：css中!important的作用

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

  8. css中!important的用法总结

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

  9. css中important的用处

    今天看代码时遇到一段不理解的地方. #note_content { line-height: 22px; border: #DEDEDE 1px solid; background: #FAFAFA; ...

随机推荐

  1. Mosquitto搭建Android推送服务（一）MQTT简介

    总体概要: MQTT系列文章分为4部分 1.MQTT简介 2.mosquitto服务器搭建 3.编写Mosquitto的可视化工具 4.使用Mosquitto完成Android推送服务 文章钢要: 对 ...

  2. eclipse开发servlet，HttpServletRequest报红叉解决方案

    eclipse开发servlet,HttpServletRequest报红叉解决方案 今天突然间有兴致,想打一会代码,于是开发一个Servlet,代码和配置路径都没问题,HttpServlet居然报错 ...

  3. 解决ftp上传connection reset错误

    切换到管理员,cmd下面执行:netsh advfirewall set global StatefulFTP disable MS对此的解释:https://technet.microsoft.co ...

  4. 模拟搭建Web项目的真实运行环境（五）

    一.开启IIS功能 刚安装完的server2008是没有默认开启IIS功能,在这里简单介绍一下如何开启IIS. 步骤: 1. 打开控制面板,选中[程序] 2. 在[程序和功能]下面,选择[打开或关闭w ...

  5. PHP 继承多态知识点

    //1.封装//目的:为了使类更加安全//做法://1.将成员变量变为私有的//2.在类里面做一个方法来间接的访问成员变量//3.在该方法里面加控制 //2.继承//1.父类//2.子类//子类可以继 ...

  6. js 字符串操作函数

    concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf() – 返回字符串中一个子串第一处出现的索引.如果没有匹配项,返回 -1 . charAt() – 返回指定 ...

  7. 前端试题本（Javascript篇）

    JS1. 下面这个JS程序的输出是什么:JS2.下面的JS程序输出是什么:JS3.页面有一个按钮button id为 button1,通过原生的js如何禁用?JS4.页面有一个按钮button id为 ...

  8. mysql从身份证号中提取生日、性别

    SELECT p.ID, p.IDCardNo, IF ( LENGTH(p.IDCardNo) , CAST( , ) AS DATETIME ), CAST( CONCAT( ', , ) ) A ...

  9. AC自动机专题

    AC自动机简介:KMP是用于解决单模式串匹配问题, AC自动机用于解决多模式串匹配问题. 精华:设这个节点上的字母为C,沿着他父亲的失败指针走,直到走到一个节点,他的儿子中也有字母为C的节点.然后把当 ...

  10. Flex Layout Attribute

    GitHub: https://github.com/StefanKovac/flex-layout-attribute 引入基本的样式,可以更好的布局,可以在线制作: http://progress ...