30

查看CSS specificity specification，没有提到该!important规则值多少“点”。

什么时候覆盖另一个？如果一个接着一个声明会发生什么？哪个规则被宣布为更重要？有某种模式吗？

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

4

2 回答 2

40

CSS 中的特殊性只涉及选择器，而不涉及它们的相关声明。!important适用于声明，因此它单独在特异性中没有任何作用。

但是，会!important影响cascade，即当多个相同的属性声明适用于某个元素时，该元素的样式的整体计算。或者，正如 Christopher Altman 简洁描述的那样：

  1. !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;
}

    该#id规则有一个更具体的选择器，因此获胜。

于 2011-04-27T13:50:57.823 回答
8

我的想法是这样的：

  1. !important是一张黑桃牌。它胜过所有的特异性点。对于您的具体问题，这!important将覆盖一个 bazillion id/classes。

  2. !important重置级联。因此，如果您使用 a!important下面的 another !important，则第二个实例规则。

那里有一个更技术性的答案，但这就是我的想法!important。

还有一点需要注意的是，如果您正在使用，!important您需要退后一步检查您是否做错了什么。!important意味着您正在反对 CSS 的级联。您应该!important在极少数情况下使用。

于 2011-04-27T13:44:21.970 回答