CSS 的优先级机制（无法覆盖bootstrap的样式）

前几天遇到了一个问题就是，我在引入bootstrap,以下简称btp。

有些时候我们发现，当我们在内部或者标签内重写样式的时候还是无法覆盖BTP你的样式，不是说内联》内部》外部吗？

事实上这个条件的前提是 这些样式的权值相同的情况下定义的，什么是权值？看下图

选择器的优先权

 

 

解释：

1.  内联样式表的权值最高 1000；

2.  ID 选择器的权值为 100

3.  Class 类选择器的权值为 10

4.  HTML 标签选择器的权值为 1

5  继承样式的权值为0.1(某些论文提出，但毫无疑问它的权值是最低的)

根据以上定义，所以我特意在选择器中尽可能详细的寻找所需要改变样式的元素，为了增加它的权值比重，

比如

< class="a"> 

    .< class="b">   

         .< class="c"> 

假设以上a-b-c为连续的继承关系（简写）当我们要选择类 .c的时候    直接用  .c(类)选择器 它的权值只有10 ，但是如果用  .a .b .c来选择，则它的权值为10+10+10那么则会选择后者的样式。

所以有时候无法覆盖BTP 的样式是因为，BTP里面的样式权值比你重写的要高，在这种情况下  内联》内部》外部样式的条件就不成立了。

所以为了更好的覆盖BTP的样式，建议尽可能详细地选择

!important 规则例外

当在一个样式声明上使用 !important 规则时，该样式声明会覆盖CSS中任何其他的声明,。尽管技术上 !important 与优先级毫无关系，但是它们之间直接相互影响。使用 !important 是一个坏习惯，应该尽量避免，因为这打断了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有!important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

一些经验法则：

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