首先我们需要知道选择器的类型有这些：

而这些css的选择器是有权重（即优先级）的，在不同选择器的样式出现冲突时候，会采用权重高的选择器设置样式，而优先级不仅仅只是：“行间>内部>外部、ID>class>元素”。css优先级到底是怎么计算的呢？

选择器的特殊性值表述为4个部分，用0,0,0,0表示，权重计算规则如下：

• 行间样式，加1,0,0,0.
• ID选择器的特殊性值，加0,1,0,0。
• 类选择器、属性选择器或伪类，加0,0,1,0。
• 元素和伪元素，加0,0,0,1。
• 通配选择器*对特殊性没有贡献，即0,0,0,0。
• 最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

特殊性值是如何进行比较的呢？比较规则如下：

• 1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。
• 无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。
• 在权重相同的情况下，后面的样式会覆盖掉前面的样式。
• 通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先，0 权值比无权值优先。

!important属性：

我们知道带有!important的属性样式优先级是最高的，但是ie6中会出现如下的bug：

p{
  color:red !important;
  color:blue;    //会显示blue
}

但是这样就会显示的是red。说明ie6还是支持important的

p{color:red !important;  }
p{color:blue;}

在使用 !important 时需要注意：

• 一定要优化考虑使用样式规则的优先级来解决问题而不是 !important
• 只有在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
• 永远不要在全站范围的 css 上使用!important
• 永远不要在你的插件中使用 !important

来自：MDN中例外的 !important 规则

怎样覆盖掉 !important：

很简单，你只需要再加一条!important 的CSS语句，将其应用到更高优先级的选择器（在原有基础上添加额外的标签、class或id选择器）上；或是保持选择器一样，但添加的位置需要在原有声明的后面（优先级相同的情况下，后边定义的会覆盖前边定义的）。

#test.a{  
  color: red !important; <!--尽管这条声明在前，但是仍会覆盖下边的样式-->  
}  
a{  
  color: blue !important;  
}

或者,同样的选择器，后边的声明会覆盖前边的:

a{  
  color: red !important;  
}  
a{  
  color: blue !important; <!--显示blue-->  
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/383