`
flex_莫冲
  • 浏览: 1079017 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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>
参考:http://www.discuz.net/home.php?mod=space&uid=697961&do=blog&id=48594
分享到:
评论

相关推荐

    CSS中的!important属性用法

    CSS中的!important属性用..........

    原来CSS里的 !important 是如此用法

    css下!important效果演示代码

    css中提升优先级属性!important的用法总结

    !important只有Ie7.0和firefox可以识别,但是Ie6.0不能成功应用.!important提升优先级,下面对它的用法做下总结

    react-embedded-animations:React库可在嵌入式体验中使用动画,其中需要在CSS中使用!important

    React库可以在嵌入式体验上使用动画,而CSS中需要使用!important。 什么时候使用 在大多数情况下,不应使用该库,仅在以下情况下使用: 如果需要在动画CSS上使用!important 安装 npm install --save react-...

    如何使用jquery修改css中带有!important的样式属性

    如何使用jquery修改css中带有!important的样式属性?下面小编就为大家带来一篇使用jquery修改css中带有!important的样式属性方法。希望对大家有所帮助。一起跟随小编过来看看吧

    详解CSS样式中的!important、*、_符号

    主要介绍了详解CSS样式中的!important、*、_符号的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下

    CSS中提升优先级属性!important的用法问题总结

    本文介绍了CSS中提升优先级属性!important的用法问题总结,分享给大家,具体如下: 一、语法 选择器{样式:值!import;} 二、说明 提升指定样式规则的应用优先权,即!important为开发者提供了一个增加样式权重的方法,...

    CSS文集

    利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握...important标记区别Firefox和IE6 DIV+CSS页面布局中注意的问题以及常用的CSS使用方法 网页布局基础-XHTML与CSS基础 CSS命名规则

    使用DIV+CSS做网站时CSS样式的优先级

    使用 DIV+CSS 做网站时 CSS 样式的优先级 在构建网站时,使用 DIV+CSS 是一种常见的做法。这种方法可以有效地节省网站代码所需的空间,提高网站加载速度。但是,在使用 CSS 样式时,不能忽视 CSS 样式的优先级问题...

    html5css3面试题及答案,前端面试题及答案-CSS篇.docx

    important &gt; id &gt; class &gt; tag * 内联样式的优先级高于 id 浮动和清除浮动 * 浮动引起的问题:父元素的高度无法被撑开,影响与父元素同级的元素 * 解决方法: + 利用 clear 清除浮动 + 在父元素后面额外添加标签...

    css important终级讲解

    这个例子应该是大家经常见到的important的用法了,在IE环境下,这行字是蓝色,在firefox下,为红色,其用法不再多说了,看下一个例子。 例二: CSS 复制代码代码如下: 1 #box div{ color:red; } 2 .important_false...

    div+css有实例,易学易懂

    5.6.3 背景属性在内联元素中的使用 5.6.4 背景属性的缩写 5.6.5 页面文本的样式 5.6.6 链接的样式 5.7 布局的基础 5.7.1 布局页面的步骤 5.7.2 使用ID 还是Class 5.7.3 控制内容显示的display 属性 5.7.4 控制内容...

    theme-mediaelement:主题开发人员使用 WordPress 媒体播放器 (mediaelement.js) 的基本样式表

    这个项目的作用是为您提供一种更简单的方法来处理这个问题,而无需大量疯狂的 CSS 和!important覆盖。 它是一个基本样式表,具有相当小的样式(基于原始的medialement.css皮肤)。 您可以使用它通过仅覆盖您需要的...

    CSS兼容性问题解决方案[归类].pdf

    解决方法是同时使用这两个属性,以确保在不同浏览器中的兼容性。 5. CSS 圆角问题 CSS 圆角问题是 CSS 中的一个经典问题。在 Firefox 中,可以使用 -moz-border-radius:4px 来实现圆角,而在 IE 中,不支持圆角。...

    css样式表代码

    字体是 CSS 样式表中一个非常重要的属性,它可以确定文本的字体、大小和样式。常见的字体有: * serif:衬线字体 * sans-serif:无衬线字体 * monospace:等宽字体 设 定 字 号 字号是 CSS 样式表中一个非常重要的...

    H5+CSS3.zip

    主要包含HTML5+CSS3基础知识,各种常用标签的意义及基本用法示例。 HTML5部分具体内容包括: 语义化标签:段落标签,标签自定义文字样式,标题标签,块,标签定义头部,标签定义底部,标签定义正文区段,标签定义侧...

    postcss-khaleesi

    PostCSS Khaleesi Pligin ti确认khiliisi mimi lingiigi中CSS pripirtiis(用khaleesi meme语言转换CSS属性的插件)。 . foo { border-radius : 50 % ; color : red; background-color : white !important ;}. foo {...

    CSS网站布局实录 (第二版)PDF版

    7.1.2 常用CSS hack使用方法 7.1.3 CSS hack管理 7.2 IE条件注释功能 7.3 盒模型问题 7.3.1 盒模型hack 7.3.2 简单盒模型hack方法 7.4 IE捉迷藏 7.5 ul的不同表现 7.6 IE 3px问题 7.7 高度不适应 7.8 IE6断头台问题 ...

Global site tag (gtag.js) - Google Analytics