查看CSS特异性规范,没有提到该!important规则值得多少“要点” 。
!important
一个人何时超越另一个人?如果一个在另一个之后被声明会怎样?哪个规则更重要?有某种模式吗?
从它的外观看,!important适用于具有更多特异性点的对象。但是,如果我声明一个bazillion id与类堆叠在一起并深深嵌套的话,会发生什么?它会否覆盖另一个未指定的标有的规则中设置的规则!important?
CSS中的特异性仅涉及选择器,而不涉及它们的关联声明。!important适用于声明,因此仅在声明方面不起作用。
但是,这会!important影响级联,这是当多个相同属性声明适用于某个元素时,该样式对于某个元素的整体计算。或者,正如克里斯托弗·奥特曼(Christopher Altman)简要描述的那样:
!important是黑桃卡。它胜过所有特异性点。 不仅如此:因为它会整体影响级联,所以如果您有多个!important选择器,并且其规则包含!important与相同元素匹配的声明,则选择器特异性将继续适用。同样,这仅仅是由于对同一元素应用了多个规则。
换句话说,对于在同一样式表中具有不相等选择器的两个规则(例如,相同的用户样式表,相同的内部作者样式表或相同的外部作者样式表),将使用具有最特定选择器的规则。如果有任何!important样式,则规则中具有最特定选择器的样式将获胜。最后,由于您只能拥有或不重要的事物,因此影响级联的范围就足够了。
这是的各种用法!important及其应用说明:
该!important声明总是覆盖(除IE6及以上),而它的人:
/* In a <style> element */ #id { color: red !important; color: blue; }
如果!important一条规则中具有相同程度的特定性的声明不止一个,则后一个声明为准:
/* In a <style> element */ #id { color: red !important; color: blue !important; }
如果在两个不同的位置声明相同的规则和相同的属性,则在两个!important声明都很重要的情况下,请遵循级联顺序:
/* In an externally-linked stylesheet */ #id { color: red !important; } /* In a <style> element appearing after the external stylesheet */ #id { color: blue !important; /* This one wins */ }
对于以下HTML:
<span id="id" class="class">Text</span>
如果您有两个不同的规则,其中一个!important:
#id { color: red; } .class { color: blue !important; }
那!important总是赢。
但是当您有多个时!important:
#id { color: red !important; } .class { color: blue !important; }