！重要和CSS特异性之间的关系

看一下CSS特殊规范 ，没有提到!important规则值多less个“点”。

什么时候推翻另一个？ 如果一个声明在另一个之后会发生什么？ 哪个规则被宣布为更重要？ 有某种模式吗？

从它的外表来看 ， !important适用于从一开始就具有更多特殊性的点。 但是如果我宣布一个bazillion id堆放在一起并且深深地嵌套，将会发生什么？ 它会覆盖另一个规定的规则吗？

Answer 1

CSS中的特定性只涉及select器 ，而不涉及其相关的声明。 !important适用于一个声明，所以它在独特性中不起作用。

但是， !important影响级联 ，这是对多个同一财产声明适用时某个元素的总体计算方式。 或者， 正如克里斯托弗·奥尔特曼简洁地描述的那样 ：

1. !important是黑桃卡 。 它胜过所有的特殊点。

但不仅如此：因为它影响整个级联，如果你有多个!importantselect器，包含一个!important声明匹配相同的元素的规则，那么select器的特殊性将继续适用。 再一次，这只是由于有多个规则适用于相同的元素。

换句话说，对于在相同样式表（例如相同的用户样式表，相同的内部作者样式表或相同的外部作者样式表）中具有不同select器的两个规则，具有最具体的select器的规则被应用。 如果有任何!important风格，那么在规则中最具特色的select者将获胜。 最后，因为你只能拥有一些重要或不重要的东西，所以你可以影响级联。

下面是!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规则有一个更具体的select器，所以一个胜利。

Answer 2

我想到的方式是这样的：

1. !important是黑桃卡 。 它胜过所有的特殊点。 对于您的具体问题， !important将覆盖bazillion id /类。

2. !important重置级联。 所以，如果你使用一个!important !important ，第二个实例的规则。

那里有更多的技术答案，但这就是我所想的!important 。

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