css样式表important优先级大于内联style设置的样式

  今天发现css样式表中使用了important提高优先级后,尽然覆盖了内联样式style中设置的对应样式,老土了。。呵呵

  测试代码如下

<style>
.c{color:Red !important}
</style>
<div class="c" style="color:Blue">内联style样式无法覆盖样式表中的important,内容显示为红色,而不是内联样式设置的蓝色</div>



  提高内联样式style的优先级也需要增加important或者用js设置对象样式增加important属性,这样才能覆盖样式表中的样式

  通过css设置

<style>
.c{color:Red !important}
</style>
<div class="c" style="color:#000000 !important">内联样式也增加important,这里就显示黑色的了,而不是红色</div>



  通过脚本设置,需要注意的是不能直接设置obj.style.color='#000000 !important',而是设置obj.style.cssText='color:#000000 !important'

<style>
.c{color:Red !important}
</style>
<div class="c">内联样式也增加important,这里就显示黑色的了,而不是红色</div>
<script>
    window.onload = function () {
        //document.getElementsByTagName('div')[0].style.color = '#000000 !important'; //不能这样设置,IE下报错:无效的属性值。
        document.getElementsByTagName('div')[0].style.cssText = 'color:#000000 !important';//要这样来设置
    }
</script>

 


原创文章,转载请注明出处:css样式表important优先级大于内联style设置的样式
评论(0)Web开发网
阅读(2801)喜欢(0)不喜欢(0)HTML/CSS兼容/XML