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

Question

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

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

从looks of it 开始，!important 适用于开始时具有更多特异性点的内容。但是，如果我声明一个与类堆叠在一起并且嵌套很深的 id 会发生什么？它会覆盖在另一个用!important 标记的不太明确的规则中设置的规则吗？

Answer 1

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

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

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

我的想法是这样的：

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

2. !important 重置级联。因此，如果您在另一个!important 下方使用!important，则第二个实例规则。

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

另外请注意，如果您使用的是!important，您需要退后一步检查您是否做错了什么。 !important 表示您正在处理 CSS 级联。在极少数情况下，您应该使用!important。