如何和何时使用 CSS 的权重设置 !important (建议:永不使用!)

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 

特别声明:此篇文章由David根据Louis Lazaris的英文文章原名《!important CSS Declarations: How and When to Use Them》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it以及作者相关信息

——作者:Louis Lazaris

——译者:David

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

Adding !important in Developer Tools

让我们来看一下!important是什么,以及在什么时候使用,如果你遇到类似情况,你就应该使用它。

层叠的概述

在我们对!important的正确用法进行探讨之前,让我们为本节的内容做个铺垫。之前,Smashing Magazine已经对CSS权重进行过深入的阐释。所以,如果你想详细了解CSS的层叠和权重关系就请读读这篇文章。

CSS权重早期在W3cplus中已进行翻译,如果您阅读英文有点吃力,可以阅读译文《你应该知道的一些事情——CSS权重》

——大漠

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

  • 找到所有作用于元素和属性的声明
  • 一个样式是否作用于元素依赖于这个样式的权重和如下所示样式来源的顺序,下面这个列表中越靠前的权重越小:
    1. 用户代理声明(译注:如浏览器默认样式)
    2. 用户声明(译注:如用户浏览器选项设置或通过开发人员调试工具修改)
    3. 开发者声明(译注:如页面中引用的CSS)
    4. 带有!important的开发者声明
    5. 带有!important的用户声明
  • 样式的应用依赖具体的情况,一个更加具体的选择器往往会比一个笼统选择器获得更大的权重。
  • 样式的应用依赖样式出现的顺序(即,后面的会覆盖前面的)

从这个提纲中,你可能已经明白!important会如何改变权重以及它在层叠中扮演一个什么样的角色。接下来让我们看一下!important更多的细节。

语法和描述

!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明,包括这个样式的属性和属性值(感谢Brad Czerniak指出其中的差别)。这里有个简单的代码示例可以清晰地说明!important是如何应用于原本的样式中的:

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

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

如果不使用!important,第二个样式声明的代码块很自然地比第一个的权重要大,原因有二:在样式表中第二个代码块要比第一个出现的晚(即,它位列第二);第二个代码块有更大的权重(是由两个id,#container #example组合而成,而不是只有一个id,#example。但是因为第一个代码块里面包含了!important,所以对于字号设置来说它有更大的权重。

见CSS权重与继承中关于权重的计算方法,如下图:

Adding !important in Developer Tools

——译者:David

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

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

针对第二点,译者作出如下标注:

.e{margin: 0 !important;}

那么就等价于

.e{margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important;
}

——译者:David

何时该使用!important

使用任何技术的利弊都视情况而定。下面是我个人对如何有效使用!important的一些观点。

永不使用

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

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

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

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

帮助测试可访问性

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

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

下面这张Smashing Magazine首页的截图,展示的正是借助FireFox的开发人员工具把正常大小的文本用用户自定义样式覆盖后的效果:

Adding !important in Developer Tools

在这个案例中,文本大小是随浏览器窗口大小可调节的,样式中并没有使用!important,所以用户定义的样式会忽略权重而覆盖开发者的样式。然而,如果body正文的文本大小是开发者使用!important来设置的,就算用户用更加具体的选择器定义了样式也不能覆盖这个文本大小的设置。因此,即使在用户样式的作用下,甚至是开发者自己滥用!important的情况下,这条包含!important的样式不仅解决了问题,还保持了文本大小的可调节性。

暂时解决紧急问题

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

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

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

我们可以使用Firebug或者Chrome开发者工具(译注:两者均可用F12唤出)查看页面元素,在不影响真正的CSS样式的情况下可以自由地编辑样式,测试效果,调试bug等等。下面这张截图展示的就是在Chrome开发者工具中看到的Smashing Magazine的一些样式:

Adding !important in Developer Tools

图中红框内带有删除线的样式表明它已经被后面的样式覆盖掉了。为了让这条样式再次作用,你得禁用后面的样式。你也可以把选择器写得更加具体以增加权重,但是这样会让整个代码块的权重都增加,这并不是我们想要的。

!important可以被加在单行样式的后面从而让已经被覆盖的样式重新作用。这样的话,你不用大量修改你真正的样式就可以调试你的CSS,直到你找到问题所在。

下图所示是在上图那条相同的样式后面加了!important。你可能已经注意到之前的删除线不见了,因为现在这条样式要比之前覆盖它的那条有更大的权重:

Adding !important in Developer Tools

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

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

 

你可以给只在打印时生效的样式加上!important,虽然不是所有情况下都需要这样做,而且正如我们之前提到的那些原因一样也不建议这么做。但是,这样可以让你在不用重复编写选择器的情况下就能覆盖具体的样式。

打印样式即打印机在打印网页时所使用的样式,关于打印样式的细节可以阅读这篇文章

——译者:David

关于单独设计的博客页面

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

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

总结

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

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

扩展阅读

  1. !important rules in the CSS2.1 spec 10
  2. !important Declarations on SitePoint’s CSS Reference
  3. CSS Specificity And Inheritance on Smashing Magazine
  4. Everything You Need to Know About !important CSS Declarations
  5. What are the implications of using “!important” in CSS?
  6. When Using !important is The Right Choice

译者手语:初次翻译前端技术博文,整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

关于David

2009年开始接触前端开发,2011年组建创业团队——[五维互动],2012年团队被“收编”并更名[创影互动],遂只身来上海发展,现在就职于FlipScript。欢迎交流共勉:腾讯微博、个人博客。

英文原文:http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it

转自:https://www.w3cplus.com/css/the-important-css-declaration-how-and-when-to-use-it.html

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/447900.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

广州科目三电子考需注意哪些问题?

广州驾考科目三从4月1日起开始试行电子评判与人工评判相结合的新制度,即电子路考,多数学员对新制度表示不适应,那么,科目三电子路考需要注意哪些问题? 从4月1日开始,科目三考试将试行计算机辅助与人工评判相结合的制度…

解决 VUE: 本地运行和服务器上运行样式不一致,run、build 运行时样式有出入

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 1. 我的情况: 我遇到 2 种情况,一个是表格的分页样式有变化。另一个是导航菜单样式有变化。 2. 解决&#xff…

开发中的“软”与“硬”:高画质移动游戏开发之道

摘要:游戏的效果不仅与游戏引擎的渲染相关,与硬件优化也有千丝万缕的联系。一款基于芯片优化的移动游戏界面,甚至可以堪比视频游戏的视觉效果。高通半导体事业部资深经理刘晓光从软硬件两个层面分享了移动游戏开发之道。 在今年的Unity亚洲开…

解决 VUE: [Vue warn]: Do not use built-in or reserved HTML elements as component id: xx

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 1. 新增一个组件,运行无问题,但F12报错: vue.esm.js?efeb:591 [Vue warn]: Do not use built-in o…

Linux系统重置和修改root密码

Linux系统经常会出现忘记root密码的情况,写下此随笔,以便记忆和学习。 一、重置root密码的步骤如下: 1.如果系统是开机状态,重启一下。进到下面这个界面按字母“e”键。 2.找到 linux16这一行,将下图红框中的内容修改为…

KETTLE 使用教程

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 Kettle的建立数据库连接、使用kettle进行简单的全量对比插入更新:kettle会自动对比用户设置的对比字段,若目标表…

为什么你应该参与到开源项目中

试图描述开源并不是一件容易的事——很多图书作家,社区领袖和主持人对于开源社区的工作原理以及它是否对新人程序员有帮助持不同意见试图描述开源并不是一件容易的事——很多图书作家,社区领袖和主持人对于开源社区的工作原理以及它是否对新人程序员有帮…

历史上最知名的15位计算机科学家

基于维基百科上超过11,000位历史人物的数据,麻省理工学院媒体实验室创建出了一种名为“历史人气指数(HPI)”的参数。以下列出了15个历史上最知名的计算机科学家,我们来看一下他们的“HPI”分数。麻省理工学院媒体实验室推出了一个…

想要转人工智能,程序员该如何学习?(学习路线、知识体系)

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 对于程序员来说,码农之路并不是一帆风顺。对于每一个入行IT业的社会青年来说,谁不是抱着想要成为最高峰的技术大…

【转载】矩阵求导、几种重要的矩阵及常用的矩阵求导公式

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本文链接:https://blog.csdn.net/daaikuaichuan/article/details/80620518 一、矩阵求导 一般来讲,我们约定x(x1,x2,...xN)…

数据结构与算法绪论

基本概念和术语 数据数据是信息的载体,是描述客观事物属性的数,字符以及所有能输入到计算机中并被计算机程序识别和处理的符号的集合。 数据元素数据元素是数据的基本单位,通常作为一个整体进行考虑和处理。一个数据元素可由若干个数据项组成…

Windows10 网络图标消失 连接不上网络 的解决方法

【背景】电脑win10的,下载一个软件重启之后网络图标消失,并且无法联网。 参照此解决方法: 原因: 【Windows Event Log】服务对应的注册表出现问题,导致无法正常启动,进而导致一些依赖于它的联网服务无法正常…

VUE:解决 [Vue warn]: Error in render: “TypeError: item.slice is not a function“ (取部分数据)

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 1. 双重循环中使用 slice方法,报错: [Vue warn]: Error in render: "TypeError: item.slice is not a fun…

在 js 中怎样获得 checkbox 里选中的多个值?(jQuery)

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 思路:利用name属性值获取checkbox对象,然后循环判断checked属性(true表示被选中,false表…

VUE项目中 获得多个复选框 checkbox 选中的值(jquery)+ 解决 Uncaught TypeError: Cannot read property ‘push‘ of undefine

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 1. 表格生成后第一列是复选框,效果: 表格是直接循环展示的后台返回数据,代码写法: 2. 得…

[开源] FreeSql.AdminLTE.Tools 根据实体类生成后台管理代码

前言 FreeSql 发布至今已经有9个月,功能渐渐完善,自身的生态也逐步形成,早在几个月前写过一篇文章《ORM 开发环境之利器:MVC 中间件 FreeSql.AdminLTE》,您可以先阅读上一篇文章内容了解来龙去脉,再回到这里…

《小狗钱钱》:理财首先应该有一种强烈的意识

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 《小狗钱钱》读完了。以下是个人觉得很有帮助和启发意义的摘抄。 1) "忽视就是一种认输"。2) 并非困难使我们放弃&#xff0c…

广州驾校考试实际道路考试注意事项(图)

导读:面对实际道路考试时,大家都会有些紧张,因为这个科目不再只是面对场地,而是要面对各种状况和各种车辆,也是获取驾照的最后一个关卡。因此,为了让大家掌握考试的整个流程,网为大家带来科目四…

《 Docker 进阶与实战 》 读书笔记

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 以下内容全文出自书目:《 Docker 进阶与实战 》 1. Docker 定义:一个开源的容器引擎,可以方便地对容…

【转】R语言函数总结

原博;R语言与数据挖掘:公式;数据;方法R语言特征 对大小写敏感通常,数字,字母,. 和 _都是允许的(在一些国家还包括重音字母)。不过,一个命名必须以 . 或者字母开头,并且如…