important

早在90年代中期到后期起草的 CSS1规范中就介绍过 !important，它能够帮助开发者和用户在修改样式表的时候轻松覆盖原本的权重。 一直以来 !important 的用法几乎没变，只在CSS2.1中有一点变化，并且在CSS3规范中没有对它做任何添加和修改。

层叠的概述

下面的提纲描述了CSS文档是如何确定给不同的样式分配不同的权重的。在CSS规范中提及的关于层叠的一个大体概括：

• 找到所有作用于元素和属性的声明

• 一个样式是否作用于元素依赖于这个样式的权重和如下所示样式来源的顺序，下面这个列表中越靠前的权重越小:

  • 用户代理声明（译注：如浏览器默认样式）

  • 用户声明（译注：如用户浏览器选项设置或通过开发人员调试工具修改）

  • 开发者声明（译注：如页面中引用的CSS）

  • 带有!important的开发者声明

  • 带有!important的用户声明

• 样式的应用依赖具体的情况，一个更加具体的选择器往往会比一个笼统选择器获得更大的权重。

• 样式的应用依赖样式出现的顺序（即，后面的会覆盖前面的）

语法和描述

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

#example {
  font-size: 14px !important;    
}

#container #example {
  font-size: 10px;
}

在上面的代码示例中，由于使用了!important，id为example的元素字号将被设置为14px。

如果不使用!important，第二个样式声明的代码块很自然地比第一个的权重要大，原因有二：

• 在样式表中第二个代码块要比第一个出现的晚（即，它位列第二）；

• 第二个代码块有更大的权重（是由两个id，#container #example组合而成，而不是只有一个id，#example。

但是因为第一个代码块里面包含了!important，所以对于字号设置来说它有更大的权重。

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

• 当!important第一次在CSS1中被介绍时是这样规定的，即一个由开发者声明的!important样式要比一个由用户声明的!important样式获得更大的权重。为了提高访问性，在CSS2 中它被颠倒了过来。

• 如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被作用上!important。

• 关键字!important必须放在一行样式的末尾并且要放在该行分号前，否则就没有效果。 （不过分号前的空格不会影响它）

• 如果因为一些特殊原因，你不得不在一个代码块中声明两个同样的属性，那么请把!important加在第一个属性后面，因为这样做会让所有浏览器中第一个属性的权重更大，而IE6除外（这是一个只有IE6才有的hack，但是不会影响你的CSS）

• 在IE6和IE7中如果你使用不同的单词替代!important（像!hotdog），这条CSS样式依然会获得更大的权重，但是其他浏览器却会忽略它。

建议永不使用

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

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

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

合理的用法

帮助测试可访问性

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

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

暂时解决紧急问题

总会有这样的情况发生——某个客户的线上网站出现了CSS的bug，你必须快速修复。

在大多数情况下你应该会用Firebug或者其他的开发者工具来调试你的CSS代码并且最终修复它。

但是，如果这个bug发生在IE6或者是其他没有提供调试工具的浏览器上的时候，你可能需要使用!important来完成快速修复。

当你用这个临时修复的办法让网站继续上线以后，你再花些时间用不破坏层叠且可维护性高的方法来修复这个bug也为时未晚。

当你找到更好的解决方案你就可以替换掉线上的!important部分，而且客户对此毫不知情。

用Firebug或者其他开发者工具覆写样式

我们可以使用Firebug或者Chrome开发者工具（两者均可用F12唤出）查看页面元素，在不影响真正的CSS样式的情况下可以自由地编辑样式，测试效果，调试bug等等。

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

CSS开发中一个让人头疼的问题，就是当我们遇到用户生成内容中有行内样式的情况，这种情况多发生在一些使用了所见即所得网页编辑器的CMS系统中。

在CSS层叠中，行内样式会覆盖常规样式。然而，我们并不想看到那些本该被我们定义好的CSS样式作用的元素却被用户生成内容中的行内样式改变。 此时你就可以用!important来避免这种问题，因为，一条被开发者加了!important的样式会覆盖行内样式。

打印样式

你可以给只在打印时生效的样式加上!important,虽然不是所有情况下都需要这样做。

总结

如果你遇到了特殊的需求，或者你想覆盖用户代理（浏览器）和开发者的默认样式，提高页面可访问性，你最好慎重使用!important。

你要对你的CSS在考虑周全的同时尽可能地避免使用!important。甚至在上面提到的许多能用到!important的地方它也不总是必要的。