CSS中!important的使用
2016-03-31 14:52
375 查看
CSS的原理:
我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样。
首先,先看下面一段代码:
虽然元素的style中有testClass类的定义,但是在上面的css定义中的用!important限定的定义却是优先级最高的,无论是在ie6-10或者Firefox和Chrome表现都是一致的,都显示蓝色。
这种情况也同时可以说明ie6是可以识别!important的,只是这个是ie6的一个缺陷吧。如果写成下面的样式,ie6是识别不出来的:
这样,在ie6下展示的时候会显示成红色。
当然,也可以通过以下方式来让ie6识别:
.testClass{
color:blue !important;
}
.testClass{
color:red;
}
通过以上方式也是可以让ie6显示成蓝色的。
以上实例说明使用!important的css定义是拥有最高的优先级的。只是在ie6下出了一点小的bug,注意书写方式一般可以轻松避开的。
我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样。
首先,先看下面一段代码:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>测试Css中的!Important区别</title> </head> <style type="text/css"> .testClass{ color:blue !important; } </style> <body> <div class="testClass" style="color:red;"> 测试Css中的Important </div> </body> </html>
虽然元素的style中有testClass类的定义,但是在上面的css定义中的用!important限定的定义却是优先级最高的,无论是在ie6-10或者Firefox和Chrome表现都是一致的,都显示蓝色。
这种情况也同时可以说明ie6是可以识别!important的,只是这个是ie6的一个缺陷吧。如果写成下面的样式,ie6是识别不出来的:
.testClass{ color:blue !important; color:red; }
这样,在ie6下展示的时候会显示成红色。
当然,也可以通过以下方式来让ie6识别:
.testClass{
color:blue !important;
}
.testClass{
color:red;
}
通过以上方式也是可以让ie6显示成蓝色的。
以上实例说明使用!important的css定义是拥有最高的优先级的。只是在ie6下出了一点小的bug,注意书写方式一般可以轻松避开的。
相关文章推荐
- CSS3 选择器——伪类选择器
- 一款绚丽的菜单,拥有个各种样式和动画
- 伪元素控制表单样式
- CSS中的textarea的一些设置之resize属性(个人笔记)
- CSS布局基础之一设备像素,设备独立像素,设备像素比,css像素之间的关系
- 使用CSS绘制三角形
- H5移动前端开发常用高能css3汇总
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- css3制作tab卡片选中小尖角
- 二级菜单总结
- Html+CSS input type=file 文件类型限制属性 accept (HTML 5)
- 根据浏览器显示界面大小变换,替换css文件方法
- CSS实现的loading页面等待效果
- LESS CSS 框架简介
- clearfix:after 清除css浮动
- 史上最全的CSS hack方式一览
- 笔记 - 10.4、HTML - CSS滤镜笔记
- CSS声明各个浏览器私有属性的命名前缀
- 笔记 - 10.3、HTML - CSS样式笔记1
- 笔记 - 10.2、HTML - CSS选择器笔记