!important语法和描述

!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明，包括这个样式的属性和属性值。

#example {

  font-size: 14px !important;

}

#container #example {

  font-size: 10px;

}

实例说明：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .div1 {

        color: red !important;

        /*color: red;*/

    }

    #div1 {

        color: blue;

        font-weight: bold;

    }

    </style>

</head>

<body>

    <div class="div1" id='div1' style='color:green;'>

        <p>div1内容</p>

        <span>span中的内容</span>

    </div>

</body>

</html>

实例总结：

1.!important会修改当前对应元素的当前css属性和值得权重

2.!important指定的属性权重比class选择器，ID选择器，内联样式的权重都高。

3.!important只对当前元素当前属性权重有影响，对子元素权重没影响

4.如果在在不懂选择器中，相同属性和值都指定了!important，选择器权重高的属性起作用

例如：

    .div1 {

        color: red !important;

    }

    #div1 {

        color: blue !important;

    }

浏览器解析结果，div中颜色为蓝色。

关于!important应该注意的一些地方：

  1. 当!important第一次在CSS1中被介绍时是这样规定的，即一个由开发者声明的!important样式要比一个由用户声明的!important样式获得更大的权重。为了提高访问性，在CSS2中它被颠倒了过来。
  2. 如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被作用上!important。
  3. 关键字!important必须放在一行样式的末尾并且要放在该行分号前，否则就没有效果。 （不过分号前的空格不会影响它）
  4. 如果因为一些特殊原因，你不得不在一个代码块中声明两个同样的属性，那么请把!important加在第一个属性后面，因为这样做会让所有浏览器中第一个属性的权重更大，而IE6除外（这是一个只有IE6才有的hack，但是不会影响你的CSS）

永不使用

非到万不得已不要用!important。如果你是出于懒惰使用!important，为了避免例行的调试而滥用它，那么你（或者是那些后继开发你项目的人）将会深受其害。

如果你并非滥用只是有偶尔用一下!important，同样，你很快就会发现你的样式会难以维护。正如上面我们讨论过的，本来，CSS会根据层叠和权重产生正常的作用顺序。但当你使用了!important就扰乱了原本的顺序，让更多的权重给了正常情况下本不应该获得这么多权重的样式。

如果你从不使用!important，那么这标志着你真正理解了CSS并且证明你在编写代码前经过深思熟虑。

正如古老的格言所说“永远不要说‘永不’”，所以接下来我们还是要来讨论!important的一些合理的用法。

帮助测试可访问性

正如前面提到过的，用户样式中可以包含!important声明，允许用户根据自己的特殊需求来给具体的CSS样式增加权重以帮助他们阅读和访问内容。

有特殊需求的用户可以把!important加到像font-size这样的打印属性上来加大字体，或者为了提高网页的对比度而把它加到与颜色相关的样式上。

暂时解决紧急问题

总会有这样的情况发生——某个客户的线上网站出现了CSS的bug，你必须快速修复。在大多数情况下你应该会用Firebug或者其他的开发者工具来调试你的CSS代码并且最终修复它。但是，如果这个bug发生在IE6或者是其他没有提供调试工具的浏览器上的时候，你可能需要使用!important来完成快速修复。

当你用这个临时修复的办法让网站继续上线以后（这样可以先摆平客户），你再花些时间用不破坏层叠且可维护性高的方法来修复这个bug也为时未晚。当你找到更好的解决方案你就可以替换掉线上的!important部分，而且客户对此毫不知情。

覆写用户生成内容中的行内样式

CSS开发中一个让人头疼的问题，就是当我们遇到用户生成内容中有行内样式的情况，这种情况多发生在一些使用了所见即所得网页编辑器的CMS系统中。在CSS层叠中，行内样式会覆盖常规样式。然而，我们并不想看到那些本该被我们定义好的CSS样式作用的元素却被用户生成内容中的行内样式改变。此时你就可以用!important来避免这种问题，因为，一条被开发者加了!important的样式会覆盖行内样式。

关于单独设计的博客页面

如果你曾经接触过设计个人博客页面的技术（许多设计师反对将 “艺术指导”用于这种技术，确实如此），像Heart Directed中展示的那样，你会发现有一种需求要求每个单独的文章都要有它自己独立的样式，抑或你需要使用行内样式。你可以用这篇文章中给出的代码为一个个人页面编写它自己的样式。

!important在这个时候可以派上用场，为了在你的站点里创建一个独一无二的页面，你可以轻松覆盖默认的样式而不必担心原本的CSS权重。

总结

如果你遇到了特殊的需求，或者你想覆盖用户代理（译注：即浏览器）和开发者的默认样式，提高页面可访问性，你最好慎重使用!important。你要对你的CSS在考虑周全的同时尽可能地避免使用!important。甚至在上面提到的许多能用到!important的地方它也不总是必要的。

尽管如此，!important在CSS中还是有用的。如果你接手一个项目，而这个项目之前的开发人员正好使用了!important，那么你在修复一些问题的时候我们今天所讨论的将会派上用场。

博文部分内容来自：http://www.w3cplus.com/css/the-important-css-declaration-how-and-when-to-use-it.html

CSS的!important修改权重的更多相关文章

  1. css的优先级 和 权重问题 以及 !important 优先级

    css的优先级 和 权重问题 以及 !important 优先级 css选择有多少种? 行内样式(style="") id选择器(#) class选择器(类,伪类) 元素选择器(标 ...

  2. css的优先级 和 权重

    之前写页面样式时,有时会遇到 用多条样式定义规则对同一个元素进行样式设置的时候,当时想到的就是  按css选择器的优先级来搞定这个问题,说实话当时也就只记得 内嵌样式 > id > cla ...

  3. HTML+css基础 css选择器 选择器的权重

    css选择器  选择器的权重 在css中,哪个选择器的权重高,就走谁的样式 标签选择器的权重是1 class选择器的权重是10 Id选择器的权重是100 行间样式的权重是1000 带有关键字 !imp ...

  4. CSS中!important的作用

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

  5. 测试-Unity修改权重

    以下内容仅为猜想,只进行了初步验证 FBX骨骼中包含所绑定的顶点索引,导入Unity后,Unity会把层级树保存起来,然后实例化的时候映射过去 编辑器下权重信息本身不在fbx文件的meta里,不可修改 ...

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

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

  7. css 中 important 的用法

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

  8. css的优先级和权重问题 以及!important优先级

    一,前言: 刚加的css怎么没有渲染出来?浏览器中查看,发现是被其他的css给覆盖了,相信我们都曾遇到过这样的问题.那么浏览器是如何选择css标签的渲染顺序的呢?换句话说,css选择器的优先级是怎么规 ...

  9. 使用CSS/JS代码修改博客模板plus

    之前对CSS/JavaScript了解还不深,只是把模板的CSS胡乱修改了几个属性.最近正好也在做一个网站的前端,学习了不少东西,再来改一改~ 上次最后之所以铩羽而归,是因为从CSS里找不到那些#和. ...

随机推荐

  1. WCF 双工模式

    WCF之消息模式分为:1.请求/答复模式2.单向模式3.双工模式 其中,请求/答复模式,在博文: WCF 入门教程一(动手新建第一个WCF程序并部署) WCF 入门教程二 中进行了详细介绍,此处将主要 ...

  2. 常用px,pt,em换算表

    pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(D ...

  3. WCF 第五章 会话级别的实例

    会话在分布式应用程序中广泛用于维护每个用户的状态.在站点或者基于站点的应用中,将每个用户的状态存储于会话中很常见.这这些情况中,用户和会话间有一个1:1比例.WCF以一个类似的概念支持服务.使用Ins ...

  4. SQL Server 2008空间数据应用系列九：使用空间工具(Spatial Tools)导入ESRI格式地图数据

    转自:http://www.cnblogs.com/beniao/archive/2011/03/22/1989310.html 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Micros ...

  5. [Raobin] Ext.net 页面由于CMB的store和对图像同时执行，所以不会触发非空验证　所以会在后台直接调Ｊｓ去验证

    X.Call("valid", vm.ID_EDIT_FORM); x.Call("前台的js的方法名称"," 参数为集合");

  6. 通过DeveloperApi获取spark程序执行进度及异常

    在应用spark时,经常要获取任务的执行进度,可以参照jobProgressListener的设计来完成该功能. 以下代码仅供参考,欢迎交流. 效果显示: 代码: package org.apache ...

  7. xcodebuild导出ipa方法

    xcode 5.x版本导出ipa是不需要开发者账号,而xcode6以后导出ipa必须要求选择开发者team,无法绕开,但我们使用xcodebuild命令行可以无视这个限制 环境: mac osx 10 ...

  8. 从 NavMesh 网格寻路回归到 Grid 网格寻路。

    上一个项目的寻路方案是客户端和服务器都采用了 NavMesh 作为解决方案,当时的那几篇文章(一,二,三)是很多网友留言和后台发消息询问最多的,看来这个方案有着广泛的需求.但因为是商业项目,我无法贴出 ...

  9. Clean Code – Chapter 3: Functions

    Small Blocks and Indenting The blocks within if statements, else statements, while statements, and s ...

  10. 初探WebService

    写博客也是一件非常费时的事儿啊,之前配置服务器和客户端的Oracle数据库搞了很久,搞定之后懒的记录,现在想想如果让我再配一次,估计又要花很长时间了. 所以把做过的东西整理整理记录下来还是很有必要的, ...