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