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

Question

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

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

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

Answer 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;
}