本文翻译自:What does !important mean in CSS? [duplicate]

Possible Duplicate: 可能重复:
What are the implications of using “!important” in CSS? 在CSS中使用“!important”有什么含义?
How do you read !important in CSS? 你如何阅读!在CSS中很重要?

What does !important mean in CSS? 什么!important在CSS中的!important意义?

Is it available in CSS 2? 它在CSS 2中可用吗? CSS 3? CSS 3?

Where is it supported? 它在哪里支持? All modern browsers? 所有现代浏览器?


#1楼

参考:https://stackoom.com/question/cn8b/什么-在CSS中的重要意义-重复


#2楼

It means, essentially, what it says; 它本质上意味着它所说的; that 'this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!' “这很重要,忽略后续规则,任何通常的特殊性问题,都适用这条规则!”

In normal use a rule defined in an external stylesheet is overruled by a style defined in the head of the document, which, in turn, is overruled by an in-line style within the element itself (assuming equal specificity of the selectors). 在正常使用中,外部样式表中定义的规则被文档head中定义的样式否决,而该样式又被元素本身内的样式所取代(假设选择器具有相同的特异性)。 Defining a rule with the !important 'attribute' (?) discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones. 使用!important '属性'(?)定义规则会丢弃关于覆盖'较早'规则的'后来'规则的正常问题。

Also, ordinarily, a more specific rule will override a less-specific rule. 此外,通常,更具体的规则将覆盖不太具体的规则。 So: 所以:

a {/* css */
}

Is normally overruled by: 通常被推翻:

body div #elementID ul li a {/* css */
}

As the latter selector is more specific (and it doesn't, normally, matter where the more-specific selector is found (in the head or the external stylesheet) it will still override the less-specific selector (in-line style attributes will always override the 'more-', or the 'less-', specific selector as it's always more specific. 由于后一个选择器更具体(并且它通常不重要,找到更具体的选择器(在head或外部样式表中)它仍然会覆盖不太具体的选择器(内联样式属性将总是覆盖'more-'或'less-'特定的选择器,因为它总是更具体。

If, however, you add !important to the less-specific selector's CSS declaration, it will have priority. 但是,如果将!important添加到不太具体的选择器的CSS声明中,它将具有优先级。

Using !important has its purposes (though I struggle to think of them), but it's much like using a nuclear explosion to stop the foxes killing your chickens; 使用!important有其目的(虽然我很难想到它们),但它就像使用核爆炸阻止狐狸杀死你的鸡一样; yes, the foxes will be killed, but so will the chickens. 是的,狐狸会被杀死,但鸡也会被杀死。 And the neighbourhood. 和邻居。

It also makes debugging your CSS a nightmare (from personal, empirical, experience). 它还使调试CSS成为一场噩梦(来自个人,经验,经验)。


#3楼

!important is a part of CSS1. !important是CSS1的一部分。

Browsers supporting it: IE5.5+, Firefox 1+, Safari 3+, Chrome 1+. 支持它的浏览器:IE5.5 +,Firefox 1 +,Safari 3 +,Chrome 1+。

It means, something like: 这意味着,像:

Use me, if there is nothing important else around! 如果周围没有其他重要的东西,请使用我!

Cant say it better. 不能说它更好。


#4楼

It changes the rules for override priority of css cascades. 它改变了css级联的覆盖优先级规则。 See the CSS2 spec . 请参阅CSS2规范 。


#5楼

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. !important规则是一种制作CSS级联的方法,但也包含您认为最重要的规则。 A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. 无论CSS规则中出现哪个规则,都将始终应用具有!important属性的规则。

So, if you have the following: 所以,如果你有以下内容:

.class {color:red !important;
}
.outerClass .class {color:blue;
}

the rule with the important will be the one applied (not counting specificity ) 具有重要性的规则将是应用的规则(不计算特异性 )

I believe !important appeared in CSS1 so every browser supports it (IE4 to IE6 with a partial implementation, IE7+ full) 我相信!important出现在CSS1中,所以每个浏览器都支持它(IE4到IE6部分实现,IE7 +全部)

Also, it's something that you don't want to use pretty often, because if you're working with other people you can override other properties. 此外,这是你不想经常使用的东西,因为如果你和其他人一起工作,你可以覆盖其他属性。


#6楼

It is used to influence sorting in the CSS cascade when sorting by origin is done. 当按原点排序时,它用于影响CSS级联中的排序。 It has nothing to do with specificity like stated here in other answers. 它与其他答案中所述的特异性无关。

Here is the priority from lowest to highest: 以下是从最低到最高的优先级:

  1. browser styles 浏览器样式
  2. user style sheet declarations (without !important) 用户样式表声明(没有!重要)
  3. author style sheet declarations (without !important) 作者样式表声明(没有!重要)
  4. !important author style sheets !重要的作者样式表
  5. !important user style sheets !重要的用户样式表

After that specificity takes place for the rules still having a finger in the pie. 之后 ,仍然有一个手指在馅饼中的规则发生了特殊性。

References: 参考文献:

  • http://www.w3.org/TR/CSS2/cascade.html#cascade http://www.w3.org/TR/CSS2/cascade.html#cascade
  • http://www.maxdesign.com.au/articles/css-cascade/ http://www.maxdesign.com.au/articles/css-cascade/

什么!在CSS中的重要意义? [重复]相关推荐

  1. 在CSS中定义a:link、a:visited、a:hover、a:active顺序

    摘自:http://www.qianyunlai.com/post-2.html 以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很 ...

  2. css中单位px和em,rem的区别

    1.PX 相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. ...

  3. html src 图片不显示图片,css中不用src也让图片显示的方法是什么?

    在网页中有两种调用图片的方法,分别是使用img标签和使用background-image属性引入图片,其中使用img标签引入图片需要使用src属性. css中不用src让图片显示的方法是使用backg ...

  4. 彻底弄懂css中单位px和em,rem的区别

    2019独角兽企业重金招聘Python工程师标准>>> rem: rem一般用于设置字体的大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem ...

  5. css中的px、em、rem 详解

    概念介绍: 1.px (pixel,像素): 是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印 ...

  6. 【转】在CSS中 ID与Class的区别?谢谢

    在样式表定义一个样式的时候,可以定义id也可以定义class.1.在CSS文件里书写时,ID加前缀"#":CLASS用"."2.id一个页面只可以使用一次:cl ...

  7. CSS中em和px单位的区别(转)

    这里引用的是Jorux的"95%的中国网站需要重写CSS"的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收 ...

  8. css中的单位换算_CSS单位px、em、rem及它们之间的换算关系

    作者:WangMin 格言:努力做好自己喜欢的每一件事 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者的区别与优势是什么?接下来我们就来学习一下吧! 单位px.em.rem分 ...

  9. css中em与px的介绍及换算方法

    em是什么?  em指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px=0.75em, 10px=0.625em.为了简化font -size的 ...

最新文章

  1. 链路聚合_链路聚合可靠性技术详解(三)
  2. 怎么转换html文件为mp3,如何把音频转换成mp3_音频文件怎么转mp3格式-系统城
  3. 水平分库分表的关键步骤以及可能遇到的问题
  4. 三基站定位几何精度因子的简便运算
  5. 新浪微博开放平台之OAuth2.0认证
  6. leetcode 515. 在每个树行中找最大值(层序遍历06)
  7. python基础学习20----线程
  8. KEIL MDK access violation at 0x40021000 : no ‘read‘ permission的一种解决方法
  9. CSS详解(一)——CSS基本原理
  10. lvs keepalive配置Jenkins2高可用
  11. mysql去除重复的数据
  12. 捻花成佛:成为股市高手需要读多少书
  13. JavaScript之Ajax(一篇入门Ajax就够了)
  14. 汉诺塔的图解递归算法
  15. 50 行代码,实现中英文翻译
  16. 实现简单的英文字母大小写转换
  17. 自恋的人脑袋有啥不一样?| 自恋型人格特质和前额脑结构
  18. 罗伯塔·威廉姆斯(roberta williams)是世界上第一位图形计算机游戏设计师,但她以...
  19. 工业交换机与商业交换机区别对比
  20. 求y=sin(x)从0到2*pi,与x轴围成的面积

热门文章

  1. Android启动模式详解
  2. 马云“赢在中国”对于80后创业者的忠告
  3. Integer装箱和拆箱 以及扔玻璃球的题目
  4. android如何获取listview中的任意行数据
  5. python graphics画圆_求高手解答·· graphics画圆出现报错!
  6. synchronized和ReentrantLock区别
  7. xml tools属性详解
  8. python字典增加和删除_Python字典的基本用法实例分析【创建、增加、获取、修改、删除】...
  9. nginx配置访问图片路径(windows)
  10. SpringBoot------全局异常捕获和自定义异常