!important的用法及作用
定义及语法
!important
,作用是提高指定样式规则的应用优先权(优先级)。语法格式{ cssRule !important }
,即写在定义的最后面,例如:box{color:red !important;}
。
在CSS中,通过对某一样式声明!important
,可以更改默认的CSS样式优先级规则,使该条样式属性声明具有最高优先级。
浏览器识别
ie7
及ie7+,firefox,chrome
等浏览器下,已经可以识别 !important
属性, 但是IE6.0 IE6及更早浏览器下仍然不能完全识别。important
的样式属性和覆盖它的样式属性单独使用时(不在一个{}
里),IE 6.0认为!important
优先级较高,否则当含!important
的样式属性被同一个{}
里的样式覆盖时,IE 6.0认为!important
较低!。
案例分析
IE6及以下浏览器有个比较显式的支持问题存在,!important
在同一条规则集里不生效。请看下述代码:
div {!important; color: #000; }
//在上述代码中,IE6及以下浏览器div的文本颜色为#000,!important并没有覆盖后面的规则;ie7、ie7+、及其它浏览器下div的文本颜色为#f00。
IE6及以下浏览器要使!important
生效,可用以下代码:
div { color: #f00 !important; }
div { color: #000; }
//上述代码中,ie6及其以下浏览器div的文本颜色为#fff,后面的重写的div样式没有起作用,`important`的样式属性和覆盖它的样式属性单独使用时(不在一个{}里),IE 6.0认为`!important`优先级较高,可以识别`!important`。
提高指定样式规则的应用优先权(优先级)
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>!important</title>
</head>
<style type="text/css">#test p{color: #000;}.fontstyle{color:#00FF00 !important;}
</style>
<body><div id="test"><p class="fontstyle">样式带有!important的元素优先级最高</p></div>
</body>
</html> //.fontstyle样式使用了!important,所以有优先级最高,覆盖掉#test p的color样式
总结实例
*
IE都能识别;标准浏览器(如FF)不能识别*
!important
只有Ie7.0和firefox可以识别,但是Ie6.0不能成功应用.
(一)区别ie与标准浏览器(如FF)的hack
为:
border:2px solid #f00;*border:1px solid #f00; //如果*定义的样式放前面会被后面的样式给覆盖掉,因为*不能提高样式的优先级
(二)区别Ie6.0 与Ie7.0、firefox的hack为:
border:1px solid #f00 !important;border:2px solid #f00; //!imorpant则可以提高样式的优先级,所以可以放前面定义。
CSS中提升优先级属性!important
的用法总结
一、语法
选择器{样式:值 !import;}
二、说明
提升指定样式规则的应用优先权,即!important
为开发者提供了一个增加样式权重的方法,让浏览器首选执行这个语句。
例如下面这个样式:
div{margin-left:20px !important;
margin-left:40px;
}
如果是在除了IE6的浏览器中,这些浏览器支持!important
属性,也就是说他们会默认让margin-left:20px!important;
这条语句生效,下面的不带!important
声明的样式将不会覆盖它,换句话说就是他的级别最高,下面的人都不能取代我!
在IE6及以下浏览器有个比较显式的支持问题存在,!important
在同一条规则集里不生效。请看下述代码:
div {margin-left:20px!important;
}div {margin-left:40px;
}
在上述代码中,IE6及以下浏览器中div
的margin-left
与其它浏览器一致,都为20px;
注意:
1、IE6及更早浏览器下,!important
在同一条规则集内不生效。
2、如果!important
被用于一个简写的样式属性,那么这条简写的样式属性所代表的子属性都会被作用上!important
。
3、关键字!important
必须放在一行样式的末尾并且要放在该行分号前,否则就没有效果。
!important的用法及作用相关推荐
- 【响应式Web前端设计】!important的用法及作用
div { color: #f00 !important; } div { color: #000; } //上述代码中,ie6及其以下浏览器div的文本颜色为#fff,后面的重写的div样式没有起作 ...
- !important的用法及作用(转)
定义及语法 !important,作用是提高指定样式规则的应用优先权(优先级).语法格式{ cssRule !important },即写在定义的最后面,例如:box{color:red !impor ...
- CSS中!important的用法及作用
定义及语法 !important,作用是提高指定样式规则的应用优先权(优先级).语法格式{ cssRule !important },即写在定义的最后面,例如:box{color:red !impor ...
- css important的作用,CSS里面important的用法
转载别人的东西,自己记录下. 例一: CSS #box { color:red !important; color:blue; } HTML 在不同的浏览器下,这行字的色应该不同! 这个例子应该是大家 ...
- inline内联的用法与作用
inline内联的用法与作用 内联函数是一种编译机制,优点从代码上是看不出来的,但是程序的执行效率上有差别,通常,编译器对函数调用的处理是一种类似中断的方式,即当执行到函数调用语句时,程序把 ...
- 一些样式选不中或者添加了!important还是不起作用的属性样式解决办法
在引用第三方ui库时,针对一些样式选不中或者添加了!important还是不起作用的属性样式解决办法: 在页面中单独再使用一个<style></style>标签,不加scope ...
- html标签验证的作用,HTML元素blockquote标签的用法及作用
html元素 标签主要用于引用长文本,有关该标签的用法及作用详解如下: 标签的定义 标签是引用一段长文本内容: 标签是一个块元素,引用的文本内容会形成一个独立的引用块: 标签引用的文本内容会在左右两端 ...
- trick用法及其作用大总结
trick用法及其作用大总结 1. L2正则化 作用:防止过拟合 提高泛化能力 用法: ①首先是定义一个带有L2正则化的 初始化权重weight的函数 # 使用正太分布初始化权重并添加L2正则化,使用 ...
- memset()函数用法及其作用
memset()函数原型是: extern void *memset(void *buffer, int c, int count) //buffer:为指针或是数组, //c:是赋给buffer的值 ...
最新文章
- 《Adobe Illustrator CC 2014中文版经典教程(彩色版)》—第2课2.6节隐藏和锁定对象...
- C++零碎知识点(一)
- Chapter 3 Phenomenon——23
- python 栈和队列 排序 初级数据结构
- 吉首大学2019年程序设计竞赛
- codis 部署和测试
- 华南农业大学计算机专业学硕20,2020年华南农业大学计算机应用技术考研经验分享...
- MariaDB 条件语句WHERE
- Array(数组-转树)
- python分片上传_python 分片上传大格式
- 矩池云上TensorBoard/TensorBoardX配置说明
- 分页offset格式_MySQL中limit分页查询性能问题分析
- 抓包工具Charles使用教程
- OpenCV学习:Windows+VS2010+OpenCV配置
- .NET获取微信openid
- 电脑ping不通的原因
- 2019-08-01软件工程总结
- kgdb调试aarch64内核模块
- TwinCAT3安装完成后使用过程中遇到的问题
- c++基本输入输出 输出不同精度的PI(程序给出的PI值为 3.14159265358979323846)。