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

Question

看一下CSS特异性规范,没有提到该!important规则值多少"点" .

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

从它的外观来看,!important适用于具有更多特异性点的东西.但是如果我宣布一个堆积着类并深深嵌套的bazillion id会发生什么呢？它是否会覆盖另一个标记较少的规则中设置的规则!important？

Answer 1

CSS中的特殊性仅涉及选择器,而不是它们的相关声明.!important适用于声明,因此它本身不起作用.

但是,!important影响级联,即当多个相同的属性声明适用于某个元素时,它是对某个元素的样式的整体计算.或者,克里斯托弗奥特曼简洁地描述:

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规则有一个更具体的选择,让一个获胜.

Answer 2

我想的方式是这样的:

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

2. !important重置级联.因此,如果您使用!important下面的另一个!important,则第二个实例会规则.

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

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