Question

关注the CSS specificity specification，没有提及!important规则值多少“点”。

什么时候覆盖另一个？如果一个是在另一个之后宣布会发生什么？宣布哪条规则更重要？有某种模式吗？

从looks of it开始，!important适用于具有更多特异性要点的内容。但是如果我宣布一个堆积着类并深深嵌套的bazillion id会发生什么呢？它是否会覆盖另一个较少指定的标有!important的规则中设置的规则？

Answer 1

CSS中的

特异性仅涉及选择器，而不涉及其关联的声明。 !important适用于声明，因此它本身不起作用。

但是，!important影响级联，这是当某个元素的多个相同属性声明适用于它时，它的样式的整体计算。或者，as Christopher Altman succinctly describes：

!important是spades card。它胜过所有特殊点。

但不仅如此：因为它影响整体级联，如果您有多个!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规则有一个更具体的选择器，以便获胜。

Answer 2

我的想法是这样的：

!important是spades card。它胜过所有特异性点。对于您的具体问题，!important将覆盖数以亿计的id /类。
!important重置级联。因此，如果您使用!important低于另一个!important，则第二个实例会进行规则。

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

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

！important和CSS特异性之间的关系

2 个答案: