css中!important的用法总结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
<!--
!important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用.!important提升优先级（或看成强制重定义-->
<!--
!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。语法格式 {
sRule!important
}
，即写在定义的最后面，例如：box {
color:red !important;
}
假如我们定义一个这样的样式： #box {
background-color: #ffffff !important;
background-color: #000000;
}
那么在支持该语法的浏览器，如Firefox、Opera中，能够理解!important的优先级，背景显示#cccccc颜色，而在IE中则显示#000000.能说它“不认识、不支持”！
-->
#box div {
color:red;
}
.important_false {
color:blue;
}
.important_true {
color:blue !important;
}
#box2 {
background-color: #cccccc !important;
background-color: #000000;
}
<!--
firefox：
下面这段如果放在最上面，则是红色的， 如果放在最下面则是blue。说明如果放在最上面，#box div覆盖了#idColor，这时是id的优先级。而.important_false的class优先级小于id，没有覆盖掉#box div。
如果放在最下面，则#idColor没有覆盖.important_false。 如果不设置id="idColor", 则是blue。说明.important_false 覆盖掉了#box div
IE7:
#idColor放在最下面，是红色的。放在最下面也是红色的，去掉id属性。也是红色的。说明都没覆盖#box div。
-->
#idColor {
color:gray;
}
</style>
</head>
<body>
<div id="box">
<div class="important_false" id="idColor">这一行末使用important。class的优先级小于id的优先级。IE7是红色，firefox是蓝色。</div>
<div class="important_true" >这一行使用了important</div>
</div>
<div id="box2"> 在不同的浏览器下，这行字的色应该不同！IE7，Firefox是红色。IE6是蓝色</div>
</body>
</html>
css中!important的用法总结的更多相关文章
- css 中 important 的用法
css 中 important 的如何使用? important对 一个良好(或者是标准)的浏览器来说,不仅仅是从顺序上提升代码的优先级,还可以用来提升class的优先级(比如firefox), ...
- Css中!important的用法
!important为开发者提供了一个增加样式权重的方法.应当注意的是!important是对整条样式的声明,包括这个样式的属性和属性值 <!DOCTYPE HTML> <html& ...
- 一个CSS中Z-index的用法
一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性 大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...
- css中!important的优先级问题
css中!important的优先级在主页面中写>在外部引用的css文件 之前我一直以为css的样式不管写在哪里只要加上!important那么它的优先级就是最高的,事实上并不是这样的,尤其在动 ...
- CSS学习笔记（9）--详解CSS中:nth-child的用法
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
- 转：css中!important的作用
转:http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html {*rule !important}这个css规则当今在网页制作的 ...
- CSS中"!important"的使用
本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...
- 详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...
- CSS中!important的作用
提升指定样式规则的应用优先权. IE6及以下浏览器有个比较显式的支持问题存在,!important在同一条规则集里不生效.请看下述代码: 示例代码: div { color: #f00 !import ...
随机推荐
- 算法笔记_030:回文判断（Java）
目录 1 问题描述 2 解决方案 1 问题描述 给定一个字符串,如何判断这个字符串是否是回文串? 所谓回文串,是指正读和反读都一样的字符串,如madam.我爱我等. 2 解决方案 解决上述问题,有 ...
- ant design pro （十六）advanced 权限管理
一.概述 原文地址:https://pro.ant.design/docs/authority-management-cn 权限控制是中后台系统中常见的需求之一,你可以利用我们提供的权限控制组件,实现 ...
- Java设计模式（二）-单例模式
单例模式建议保证某个对象仅仅仅仅有一个实例,当仅仅有一个对象来协调整个系统的操作时,在计算机系统中.线程池.缓存.日志对象.对话框.打印机.显卡的驱动程序对象常被设计成单例.总之,选择单例模式就是为了 ...
- Android自动化框架
Android自动化框架 已有 2085 次阅读2014-8-26 12:19 | Android 几种常见的Android自动化测试框架及其应用 随着Android应用得越来越广,越来越多的公司推出 ...
- Android WiFi热点7.1以上版本适配
代码地址如下:http://www.demodashi.com/demo/13907.html 一.准备工作 开发环境: jdk1.8 AS(3.0.1) 运行环境: 华为V10(Android ...
- Axure 蚂蚁设计团队组件库 让交互稿美美"搭"
Github资源:https://github.com/ant-design/ant-design-pro English | 简体中文 技术实践篇 https://pro.ant.design/do ...
- hibernate中继承映射保存
1 简单继承映射,在子类上进行映射配置,可以将父类属性直接配置在子类映射文件中. 简单例子如下:teacher类继承自Person类. public class Person { private in ...
- 常用的SQL
--时间计算: select GETDATE() ,GETDATE()) ,GETDATE()) ,GETDATE()) ,GETDATE()) ,GETDATE()) ,GETDATE()) --查 ...
- Android中MVC、MVP、MVVM具体解释
前言 今天有时间就刚好有想写关于这几个名词.对于我来说.事实上这么多名词.思想归根究竟就是要依据项目实际.人员配置来做合理优化,既不能纸上谈兵.又不能畏惧不前.那么合理分阶段架构和完好代码才是关键,本 ...
- 李洪强iOS开发之Block和协议
李洪强iOS开发之Block和协议 OC语言BLOCK和协议 一.BOLCK (一)简介 BLOCK是什么?苹果推荐的类型,效率高,在运行中保存代码.用来封装和保存代码,有点像函数,BLOCK可以在任 ...