小编典典

重要与CSS特异性之间的关系

css

查看CSS特异性规范,没有提到该!important规则值得多少“要点”

一个人何时超越另一个人?如果一个在另一个之后被声明会怎样?哪个规则更重要?有某种模式吗?

从它的外观看,!important适用于具有更多特异性点的对象。但是,如果我声明一个bazillion
id与类堆叠在一起并深深嵌套的话,会发生什么?它会否覆盖另一个未指定的标有的规则中设置的规则!important


阅读 345

收藏
2020-05-16

共1个答案

小编典典

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;
}
2020-05-16