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

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

  1. div {
  2. color: #f00 !important;
  3. color: #000;
  4. }

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

IE6及以下浏览器要使!important生效,可用以下代码:

  1. div {
  2. color: #f00 !important;
  3. }
  4. div {
  5. color: #000;
  6. }

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

案例:

  1. <!DOCTYPE html>
  2. <html lang="zh-cmn-Hans">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <style>
  7. .test {
  8. color: #f00 !important;
  9. color: #000;
  10. }
  11. .test2 {
  12. color: #f00 !important;
  13. }
  14. .test2 {
  15. color: #000;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div class="test">同一条样式内,!important将在IE6及以下浏览器中失效</div>
  21. <div class="test2">在分散的样式条目内,IE6及以下浏览器对!important的支持与其它浏览器一致</div>
  22. </body>
  23. </html>

效果:

css属性之!important的更多相关文章

  1. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  2. 如何利用 jQuery 修改 css 中带有 !important 的样式属性?

    使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...

  3. Mozilla推荐的CSS属性书写顺序及命名规则

    传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...

  4. jQuery修改css属性

    jQuery CSS 操作jQuery 拥有三种用于 CSS 操作的重要函数:$(selector).css(name,value)$(selector).css({properties})$(sel ...

  5. CSS属性操作

    CSS属性操作 1 属性选择器 Elenment(元素) E[att] 匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略)(推荐使用) 例如:[po]{ font-size: 5 ...

  6. CSS属性级Hack

     CSS属性级Hack    color:red; /* 所有浏览器可识别*/   _color:red; /* 仅IE6 识别 */   *color:red; /* IE6.IE7 识别 */   ...

  7. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  8. 每天CSS学习之!important

    通过在CSS属性后面跟上!important参数,就会让该属性的优先级变为最高,不管是在css文件,还是内联style中,就属后面跟了!important这个小弟的属性的优先级最高. 让我们来测试一下 ...

  9. CSS属性书写顺序及命名规则

    /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * list-style * ...

随机推荐

  1. UVa 340 Master-Mind Hints (优化查找&复制数组)

    340 - Master-Mind Hints Time limit: 3.000 seconds http://uva.onlinejudge.org/index.php?option=com_on ...

  2. [转] Python 模块学习:os模块

    一.os模块概述 Python os模块包含普遍的操作系统功能.如果你希望你的程序能够与平台无关的话,这个模块是尤为重要的.(一语中的) 二.常用方法 1.os.name 输出字符串指示正在使用的平台 ...

  3. C# SqlHelper

    操作数据库时,经常会把常用的方法封装到一个类中,这里简单写了一个SQLHelper类,供我平时调用. public static class SqlHelper { private static re ...

  4. Genymotion 模拟器 VirtualBox

    准备 介绍: 1.Genymotion安卓模拟器其实不是普通的模拟器,严格来说,genymotion是虚拟机,被网传定义为模拟器,加载APP的速度比较快,操作起来也很流畅.2.Genymotion依赖 ...

  5. jQuery 基本实现功能模板

    下面是列出了基本功能的实现 <!DOCTYPE html> <html> <head> <script src="http://libs.baidu ...

  6. CSS中伪类的使用

    原文:http://www.cnblogs.com/guopei/archive/2011/04/16/2017627.html 何为伪类? 也就是实际实现了类的效果,但是并没有实际添加到标签中的类, ...

  7. linux free命令建检查内存状态

    前端时间发现博客服务器物理内存使用过高问题,就是使用linux free命令检查的,这次详细介绍下这个命令. 命 令: free 功能说明:显示内存状态.语 法: free [-bkmotV][-s  ...

  8. Cacti添加IO模板并监控磁盘IO

    1.下载Cacti_Net-SNMP_DevIO_v3.1.zip 下载Cacti_Net-SNMP_DevIO_v3.1.zip,解压并上传net-snmp_devio.xml到/resource/ ...

  9. div边框阴影的实现【转载】

    box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: Firefox支持Box Shadow(阴影):-moz-box-shadow:2px 2p ...

  10. phpcms v9版本二次开发四步曲

    今晚看了一下PHPCMS V9版本,做一个实例抛砖引玉,其实很简单,以下是二次开发的一个实例以旅游模块为例1.   在phpcms\modules目录下建立一个文件夹tour2.  在phpcms\m ...