!important与CSS特异性之间的关系

Question

!important与CSS特异性之间的关系

csscss-specificity

31

查看CSS优先级规范，没有提到!important规则的价值有多少“分”。

一个规则什么时候会覆盖另一个规则？如果一个规则在另一个规则之后声明，会发生什么？哪个规则被声明为更重要？是否存在某种模式？

从看起来，!important适用于具有更高特异性点数的内容。但是如果我声明了大量带有类和深嵌套的ID，会覆盖用!important标记的其他不那么详细说明的规则吗？

- Zirak

5

请确保您编写的是 property: value !important，而不是 important!（就像您问题标题中所写的）或 property: value; !important（就像您第一个演示中的代码）。在您第二个演示中，您编写了 div#green，它正在寻找 <div id="green">，但在您的演示中不存在该元素。总之，您需要确保了解更基本的问题，然后再担心 !important 的细微差别。 - thirtydot

2个回答

8

我这样想：

1. !important 是一张黑桃牌，它能够压倒所有的特异性点数。对于你提出的问题，!important 将覆盖数百个 id/classes。

2. !important 重置层叠。因此，如果你在另一个 !important 下使用了 !important，第二个实例就会生效。

还有更多技术性的答案，但这就是我对 !important 的理解。

再说一句，如果你正在使用 !important，你需要退后一步，检查你是否做错了什么。 !important 意味着你正在违反 CSS 的层叠。你应该只在极少数情况下使用 !important。

- Christopher Altman

4

Christopher Altman是正确的。看起来你在分号错误的一侧使用了!important...另外，你的第二个选择器根本没有选择div...它只会从那个选择器继承，这就是为什么使用第一个选择器的原因。 - Mark Steggles

如果你经常使用!important，那么你可能做错了什么。最后一点加1分。 - Spudley

2

@zirak - 这个怎么样？你的第二个CSS选择器正在寻找一个ID为“green”的div，但在你的示例中并不存在。你到底想要证明什么（却失败了）？ - My Head Hurts

好的，请将id # green更改为id # id。它不会变成红色。这就是我不理解的原因。 - Zirak

如果在id和class之间添加一个空格，那么它将变成红色。它保持绿色的原因是因为div#id.class比div#id更具体。这里有一个链接，可以很好地解释特异性。我曾经在Stack Overflow上看到过它的链接。 - My Head Hurts

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

CSS中的特异性仅涉及选择器，而不涉及它们关联的声明。 !important适用于声明，因此它本身在特异性方面没有作用。

但是，!important会影响级联，这是为某个元素计算样式的总体过程，当多个相同的属性声明应用于它时。或者，正如Christopher Altman所描述的那样：

!important就像一张黑桃牌，它可以打败所有特异性点。

但不仅如此：由于它总体上影响了级联，如果您有多个具有匹配同一元素的!important声明的!important选择器，则选择器特异性将继续应用。同样，这只是由于有多个规则应用于同一元素。

换句话说，在同一样式表（例如，同一用户样式表、同一内部作者样式表或同一外部作者样式表）中具有不同选择器的两个规则中，具有最具体选择器的规则适用。如果有任何!important样式，则具有最具体选择器的规则中的样式获胜。最后，由于您只能拥有重要或不重要的内容，因此在影响级联方面无法再进行更深入的操作。

这里是关于!important的不同用法及其应用的示例：

The !important declaration always overrides the one without it (except in IE6 and older):

/* In a <style> element */
#id {
    color: red !important;
    color: blue;
}

If there is more than one !important declaration in a rule with the same level of specificity, the later-declared one wins:
```
/* In a <style> element */
#id {
    color: red !important;
    color: blue !important;
}
```

If you declare the same rule and the same property in two different places, !important follows the cascading order if both declarations are 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 */
}

For the following HTML:

<span id="id" class="class">Text</span>

If you have two different rules and one !important:

#id {
    color: red;
}

.class {
    color: blue !important;
}

That !important always wins.

But when you have more than one !important:

#id {
    color: red !important;
}

.class {
    color: blue !important;
}

The #id rule has a more specific selector, so that one wins.