首页 > css教程 > 正文

图文详解CSS中!important 的使用方法

原创 2018-09-14 18:01:22 0 46
赞助会员专享特权
在工作中经常会遇到因为选择器优先级导致的样式无法呈现,这个时候就要用到一个特殊的CSS属性,就是!important。!important使属性值有最高优先级,可以用它来设置想要的样式。那接下来就和大家讲讲CSS中!important 怎么使用,有需要的小伙伴过来看看吧。

一、CSS !important 的作用和用法

作用:提升指定样式规则的应用优先权,即!important提供了一个增加样式权重的方法,让浏览器首选执行这个语句。
使用方法:选择器 {样式:值 !important}
比如,在CSS中给了.box{color:red !important;}这个属性,就意味着类名为box的这个标签具有最高优先级,不管你把默认的颜色设置为什么,他最终只会显示红色。

二、CSS !important 实例解析

代码第一行设置了父元素里面所有div中字体色为红色,第二行和第三行都用class重新定义了自身div的字体色为蓝色,不同的是,第三行使用important,而第二行没有使用了!。

HTML部分:

<div id="father">
      <div class="aa">PHP中文网欢迎大家来学习</div>
      <div class="bb">PHP中文网欢迎大家来学习</div>
  </div>

CSS部分:

#father div{
       color:red;
  }
  .aa{
       color:blue;
  }
  .bb{
       color:blue !important;
  }

效果图:

important.jpg

从图片可以看出结果,那为什么会这样呢?

默认情况下,ID选择器的优先级高于类选择器,所以,第二行中即使用class重定义了自身样式,也无法生效,所以继承父级属性,这行字还是红色。 但是,第三行中,用了important,是其具有最高的优先级,所以这里的css样式生效了,字变为了蓝色。

注意:

1、IE6及更早浏览器下,!important在同一条规则集内不生效。
2、如果!important被用于一个简写的样式属性,那么这条简写的样式属性所代表的子属性都会被作用上!important。
3、关键字!important必须放在一行样式的末尾并且要放在该行分号前,否则就没有效果。

以上就是图文详解CSS中!important 的使用方法的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:!important ,CSS
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原来CSS里的 !important 是如此用法_经验交流
  • 当ie7不认!important之后 [布局的解决办法]_经验交流
  • !important在ie7.0的hack方法_CSS/HTML
  • css中!important的作用
  • CSS:!important使用代码分享
  • 图文详解CSS中!important 的使用方法
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • CSS  在线手册 CSS 在线手册
  • CSS3  最新版参考手册 CSS3 最新版参考手册
  • 弹指间学会CSS视频教程 弹指间学会CSS视频教程
  • 独孤九贱(2)_CSS视频教程 独孤九贱(2)_CSS视频教程
  • CSS高级实例视频教程 CSS高级实例视频教程
  • 相关视频章节