css的优先级问题（解决bootstrap.css覆盖自己写的css样式的问题）

常遇见的问题：在引用bootstrap.css的网页中，自己写的css样式总是被bootstrap.css的样式覆盖，还很难让自己的样式呈现，有时加

!important都不起作用。

这个就要考虑到权值的大小，先看看优先级。

选择器的优先权

 

 

解释：

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

2.  ID 选择器的权值为 100

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

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

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

 

BTP里面的样式权值比你重写的要高，就会覆盖你写的样式，增加选择器的权重就可以解决问题了。

例子：

.nationalPlate>.national_top>#fontChange{
    margin:0;
    padding:0;
}

!important 规则例外

当在一个样式声明上使用 !important 规则时，该样式声明会覆盖CSS中任何其他的声明,。尽管技术上 !important 与优先级毫无关系，

但是它们之间直接相互影响。使用 !important 是一个坏习惯，应该尽量避免，因为这打断了样式表中的固有的级联规则

使得调试找bug变得更加困难了。当两条相互冲突的带有!important 规则的声明被应用到相同的元素上时，

拥有更大优先级的声明将会被采用。

一些经验法则：

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

转载于:https://www.cnblogs.com/wen5211314/p/7058235.html