关系重要和CSS特异性

看着 the CSS specificity specification，没有提到有多少“点”！重要的规则是值得的。

何时重写另一个？如果一个人被宣布为另一个呢？宣布哪一项规则更重要？有某种模式吗？

从looks of it起，重要的是应用于具有更多特点的开始。但是，如果我宣布一个bazillion id堆叠在一起，深深嵌套，会发生什么？它是否会覆盖另一个规则集，较少的规则标记为！important？

解决方法

CSS中的特殊性仅涉及选择器，而不是其关联的声明。 ！重要的是适用于一个声明，所以它一个人不具有特异性的作用。

然而，!important影响级联，这是当同一属性声明适用于某个元素时，对某个元素的样式的总体计算。或者，as Christopher Altman succinctly describes：

1. !important is a 07002. It trumps all specificity points.

但不仅如此：因为它影响了整体的级联，如果你有多个！重要的选择器，其中包含一个匹配相同元素的重要声明的规则，那么选择器的特性将继续适用。同样，这只是因为有多个规则应用于同一个元素。

换句话说，对于具有相同样式表中不等选择器的两个规则(例如，相同的用户样式表，相同的内部作者样式表或相同的外部作者样式表)，具有最特定选择符的规则将适用。如果有任何重要的样式，则具有最特定选择器的规则中的一个将胜出。最后，既然你只能有一些重要的东西，那么就像你可以去影响级联一样。

以下是对各种用途的重要说明及其应用方法：

>！！重要的声明总是覆盖一个没有它的(除了IE6和更旧的)：

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

>如果有不止一个！具有相同特异性水平的规则中的重要声明，则稍后声明的一个胜利：

/* 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>

如果你有两个不同的规则和一个重要的：

#id {
    color: red;
}

.class {
    color: blue !important;
}

那个！重要的总是胜利。

但是当你有多个！重要的是：

#id {
    color: red !important;
}

.class {
    color: blue !important;
}

#id规则有一个更具体的选择器，所以一个赢了。