解决css样式被!important覆盖
案例
最近想把博客照片改成圆角,讲道理给图片加个baiborder-radius:50%
的样式应该就妥妥的了,但我刷新来刷新去死活就没反应,打开调试窗口一看,发现我写的圆角样式原来失效了,看了半天才发现是有一个全局的baiborder-radius:0
优先级更高:
解决
可我写在元素里的样式优先级不是最高的吗,稍微查了一下,原来这个!important
是个例外,人家能插队;于是乎我也想到一个解决办法,就是打不过就加入,在我的图片样式中也加入!important
,这样一来,果然成功了:
总结
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; } /*优先级最低,不会生效*/
正文到此结束