您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
 
   
 
 
     
   
 订阅
  捐助
!important CSS 声明: 如何以及何时使用
 
作者:vjrmlio 来源:博客 发布于: 2016-11-22
   次浏览      
 

在90年代中后期起草CSS1 规范 的时候,引入了!important 声明,用来帮助开发者和用户在改变样式表时,轻松覆盖常规特异性。多数情况下,!important 声明一直没有变化,只有在CSS2.1 中有一个小变化,CSS3规范中并未新增或修改该声明。让我们来看看这类声明到底是什么东东,如果需要,我们什么时候使用它们。

样式表简略指引

在开始了解 !important 以及它如何起作用之前,让我们为本次讨论制造一些背景。在以前,Smashing Magazine 也曾深入介绍过 CSS 的特性 ,如果你想要了解关于CSS样式表以及其特性之间的关联的详细讨论,可以先看看那篇文章。

下面是给定的CSS样式文档,如何给遇到的样式定义权重的基本概述。这是一份规范中讨论的样式表的总则:

先找出所有应用到元素和属性的声明

根据下面的顺序给出的重要性和来源,对元素应用样式,列表中第一项的权重最低:

用户代理中的声明

用户的声明

作者的声明

作者带有!important 的声明

用户带有!important 的声明

根据明确程度应用样式,更明确的选择器会比普通的选择器更胜一筹

根据在样式表中出现的顺序应用样式

有了这些基本概述,你也许已经知道如何权衡!important 声明,以及它们在样式表中扮演什么样的角色。让我们更进仔细的研究 !important。

语法以及描述

!important 声明为样式表的作者提供了一种为CSS值比其本身拥有的更多权重的方式。在这里,需要注意的是“!important声明”这个短语,它指的是带有!important的所有CSS声明,包括属性和值。 (感谢 Brad Czerniak 为我指出该差异)。这里有个简单的例子代码,它清楚的演示了!important 如何影响应用它的样式的原本方式:

#example {

font-size: 14px !important;

}

#Container #example {

font-size: 10px;

}

在上面的例子代码中,id为“example”的元素的文本大小为14px,这是因为补充了 !important。若若是没有使用!important,第二个声明块本来会比第一个有更高的权重,出于以下两个原因: 第二个声明块在样式表的后面部分。而且,第二个声明块更加明确。(#container 后面的#example ,而不仅仅是#example)。但是,由于!important的接入,第一个font-size 规则变得更有权重。

关于!important 声明,有几点需要注意:

在!important 首次引入in CSS1时,带有!important 声明的作者规则比带有!important 声明的用户规则有着更高权重;为了改进可接入性,这一规则在CSS2 中被调换过来。

如果在复合属性中使用 !important ,它会为其代表的所有的子属性添加权重。

!important 关键字(或语句)必须置于行末,正好位于分号前面,否则会不起作用(尽管分号前有一个空格不会打断它)

如果出于特别原因,你必须在同一个声明块中书写某一个属性两次,那么在第一个结尾处添加!important ,它就在除了IE6之外的所有浏览器肿拥有更高的权重。(这是针对IE6的破解,但不会让你的CSS非法)

在IE6 和IE7中,如果你使用其他的词来替代!important (如 !hotdog),CSS规则也会被基于额外权重,而其他的浏览器则会忽略它。

何时该用!important ?

无论何种技术,在特定环境下总是有利有弊。那么,如果需要的话,什么时候使用呢?这里是我对潜在的有效使用的主观概述。

永不使用

!important 声明,除非是其他所有途经都已用尽而又确实需要的情况,否则都不应使用。如果你是出于懒惰使用!important ,为了避免正确调试或者急于完成项目,那么你是在滥用它,而且,你(或那些承接你项目的人)会品尝恶果。

即使你只是在样式表中少量使用,你不就就会发现样式表的这一部分很难维护。正如我们上面讨论的,CSS属性权重通过层叠和明确性自然发生。使用!important的时候,你在打乱原有的规则,给原本不应有此权重的规则更高的权重。

如果你从不使用!important,这可能表示你理解了CSS,而且在书写代码之前有过深思熟虑。话虽如此,古语有云“没有绝对的事”,这里也很适用。下面有一些!important的合理使用。

增添或测试可及性

如上所述,用户样式可以包含!important 声明,允许有特殊需要的用户为特定的CSS规则增加权重,以增强他们阅读和获取内容的能力。

有特殊需要的用户可以为排版属性,如font-size 添加 !important 以使得字体变大,或者为颜色相关的规则添加!important 增强网页的对比。

下面的截屏中,Smashing Magazine的主页是以用户定义的样式覆盖了本来的文本大小,使用火狐的开发者工具就可以做到:

这种情况,文本大小在没有使用!important时是可调整的,因为用户定义的样式会覆盖作者的样式,而且忽略明确性。然而,如果作者的样式中为主体部分的文本大小使用了!important 声明,用户的样式就不能覆盖文字大小的设定了,即使使用了更加明确的选择器。!important 的介入,解决了这个问题,并在用户的权利范围内保持了文本大小的可调性,即使作者滥用了!important。

临时修复紧迫问题

有些时候,正在运行的客户站点可能会出现CSS bug,你需要尽快修正。大部分情况下,你可以通过Firebug或者其他开发工具来找出需要修正的CSS代码。但是,如果问题发生在IE6或是另一个没有调试工具的浏览器,你可能需要使用!important来完成快速修复。

在你将临时修复提交到产品之后(这会使客户高兴点),你可以在本地使用更易维护的方法来修正问题,它们不会让你的样式表变得脏乱不堪。再找出更好的解决方案之后,你可以将其添加进项目并去掉!important ,——用户一点也不会察觉到。

在Firebug或其他开发工具中覆盖样式

在Firebug或Chrome的开发者工具中通过审查元素,允许你即时编辑、测试、调试等等——不会影响真实的样式表。看看下面的截图,展示了Chrome开发者工具中的一些Smashing Magazine的样式:

高亮的背景样式规则中间划了一条线,表示该规则被另后面的规则覆盖。想要重新应用该规则,你可以找到下一条规则并禁用它。你也可以修改当前选择器使其更明确,但是它会使整个声明块都变得更明确,这可能不是你想要的。

可以给单行添加!important 来给被覆盖的规则增加权重,这样一来,就允许你测试和调试CSS问题,无需在解决问题之前对实际样式表做出太大改变。

下面是带有!important的相同样式规则。你会注意到中间的线不见了,因为这条规则现在比之前覆盖它的规则用于更高的权重了

在用户生成的内容中覆盖内联样式

在CSS开发中,用户生成的内容中包含内联样式是很让人头痛的。在CSS样式中,内联样式会覆盖常规的样式,所以生成的内容中所有的不想要的元素样式想要使用定制的CSS规则,即使可能,也很困难。你可以使用!important 声明来规避这个问题,因为作者的样式表中带有 !important 的CSS规则会覆盖内联CSS。

对于打印样式表

尽管这个不是完全必要的,而且,可能在某些情况下因为前面提到的原因让你望而却步,但是,你可以为只用于打印的样式表添加!important 声明,这样就可以覆盖指定的样式,无需重复选择器特异性。

对于特定的博客日志

如果你对 特别设计的博客日志 有所涉猎(许多设计者使用“art direction” 来表示该技术,那也是对的), 如Heart Directed 上展示的,你就会知道这样的承诺,要求每个单独设计的文章,有它自己的样式表,否则你需要使用内联样式。使用Digging Into WordPress博客日志贴出的代码,你可以给每个页面添加它自己的样式。

!important 的可以在这个实例中派上用场,允许你轻松的覆盖默认的样式,来为你的单个博客帖子或是网页生成独特的体验,无需担心原本的CSS特异性。

结论

!important 声明还是留给特殊需要和那些想要通过覆盖默认用户代理或作者的样式表,以使网页内容更易获取的用户使用吧。而你最好尽力为你的CSS多作考虑,并尽可能的避免使用!important 。甚至在上面这描述的这些用法中,!important 的使用也不总是必要的。

不管怎么说,!important 是一个合法的CSS。你可能会承接一个项目,项目的前开发者使用了它,或者你可能需要赶紧打一些补丁,这样就派上用场。更好的理解它并为需求出现做好准备当然是很有好处的了。

你在样式表中使用过!important 吗?什么时候使用的?你还能想到其他需要使用它的环境吗?

   
次浏览       
 
相关文章

深度解析:清理烂代码
如何编写出拥抱变化的代码
重构-使代码更简洁优美
团队项目开发"编码规范"系列文章
 
相关文档

重构-改善既有代码的设计
软件重构v2
代码整洁之道
高质量编程规范
 
相关课程

基于HTML5客户端、Web端的应用开发
HTML 5+CSS 开发
嵌入式C高质量编程
C++高级编程
最新活动计划
LLM大模型应用与项目构建 12-26[特惠]
QT应用开发 11-21[线上]
C++高级编程 11-27[北京]
业务建模&领域驱动设计 11-15[北京]
用户研究与用户建模 11-21[北京]
SysML和EA进行系统设计建模 11-28[北京]

十天学会DIV+CSS(WEB标准)
HTML 5的革新:结构之美
介绍27款经典的CSS框架
35个有创意的404错误页面
最容易犯的13个JavaScript错误
设计易理解和操作的网站
更多...   

设计模式原理与应用
从需求过渡到设计
软件设计原理与实践
如何编写高质量代码
单元测试、重构及持续集成
软件开发过程指南

东软集团 代码重构
某金融软件服务商 技术文档
中达电通 设计模式原理与实践
法国电信 技术文档编写与管理
西门子 嵌入式设计模式
中新大东方人寿 技术文档编写
更多...