原创

解决css样式被!important覆盖


案例

最近想把博客照片改成圆角,讲道理给图片加个baiborder-radius:50%的样式应该就妥妥的了,但我刷新来刷新去死活就没反应,打开调试窗口一看,发现我写的圆角样式原来失效了,看了半天才发现是有一个全局的baiborder-radius:0优先级更高:

img

解决

可我写在元素里的样式优先级不是最高的吗,稍微查了一下,原来这个!important是个例外,人家能插队;于是乎我也想到一个解决办法,就是打不过就加入,在我的图片样式中也加入!important,这样一来,果然成功了:

img

总结

1.css优先级

一般而言,所有的样式优先级顺序应该为:内联样式(在 HTML 元素内部)> 内部样式表(位于 标签内部)> 外部样式表 > 浏览器缺省设置

2.!important 例外规则

当在一个样式声明中使用一个 !important规则时,此声明将覆盖任何其他声明。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。

3.规范

由于!important的优先级例外,他会破坏样式表中的固有的级联规则,使得调试找bug变得更加困难;所以我们应该尽量避免使用!important来实现样式优先,而通过更具体的规则来实现样式优先:

<div id="test">
  <span>Text</span>
</div>
/*在选择的元素前增加更多元素,选择器更具体化,就能获得更高的优先级*/
div #test span { color: green; }  /*这条规则最具体,所以优先级最高,覆盖了下方blue和red*/
div span { color: blue; }    /*优先级次之,覆盖red,但被green覆盖*/
span { color: red; }    /*优先级最低,不会生效*/
正文到此结束