`
flex_莫冲
  • 浏览: 1092322 次
  • 性别: 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 的使用

    important`,只在确实需要强制应用样式且无其他方法解决的情况下使用。 在压缩包中的`demo.html`文件,可能包含了一个示例,演示了如何使用`!important`来覆盖已有的CSS规则。打开这个文件,你可以看到实际的应用...

    CSS中的!important属性用法

    important`,并且尽量避免在全局样式中使用,以免对整个样式表造成混乱。 为了更好地管理和解决浏览器兼容性问题,推荐使用CSS预处理器(如Sass或Less),它们允许更灵活的规则定义,或者采用特性检测库(如...

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

    important` 可以作为临时解决方案来快速覆盖已有样式,但它不推荐在生产环境中大量使用,因为它会使CSS难以维护和管理。 5. **优先级规则**:CSS优先级的计算基于选择器的特异性,`!important` 相当于增加了无限的...

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

    important`的用法、应用场景以及其背后的原理。 #### 一、`!important`的基本概念 `!important`是一种特殊的权重声明,用于提高CSS属性值的优先级。当一个CSS属性值后面跟上`!important`时,该属性值将获得更高的...

    通过jquery修改带有!important的样式

    在这个例子中,我们使用`$('#myLink')`选择器选择了ID为`myLink`的元素,并使用`.css('cssText', ...)`方法来更新其样式。注意这里使用的语法格式是`'background: url(/path/to/new/image.jpg) !important;'`,确保...

    css中!important的作用(IE6 IE7 FF)及其原理

    important`的声明,即使这些声明在CSS文件中出现的位置更晚。通常,CSS的优先级由选择器的特异性(selector specificity)决定,但`!important`的存在打破了这一规则,使得具有`!important`的声明优先级最高。 在IE...

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

    important`的CSS样式时,使用jQuery的`.css("cssText", "...")`方法是一种有效的方法。这种方法可以确保新的样式规则覆盖已有的`!important`规则,从而实现动态样式修改。在实际开发中,应谨慎使用`!important`,...

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

    important、*和_在CSS中均与样式的优先级有关,但在实际的网页设计和开发中,为了保持代码的可维护性和兼容性,我们更推荐使用CSS预处理器、JavaScript以及现代的CSS特性如Flexbox和Grid布局等来处理样式的优先级和...

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

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

    !important用法使用介绍

    important` 的用法及其在不同浏览器中的兼容性问题,特别是与 Internet Explorer(IE)系列浏览器和 Firefox 的差异。 首先,`!important` 关键字通常跟在属性值的后面,通过 `!` 符号来标识,例如 `color: blue !...

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

    important`的用法和注意事项。 ### 一、语法 ```css 选择器 { 样式: 值 !important; } ``` 在这个结构中,`!important` 关键字紧跟在属性值后面,由一个感叹号(!)引出,然后是一个分号(;)。这样指定的样式将...

    IE6支持!important吗 如何用!important解决浏览器兼容性问题

    important时,应当尽量寻找更合理的CSS架构,比如通过使用更具体的选择器或者创建一个更合适的CSS类,来避免使用!important。 总之,!important是一个非常有用的工具来解决浏览器兼容性问题,尤其是在旧版浏览器如...

    css常见考题 !!css常见考题 css常见考题

    important`,可以在CSS规则中使用以提高优先级。 - IE也支持`!important`,但需要注意不要滥用。 - **示例代码:** ```css .important-style { color: red !important; } ``` #### 六、垂直居中技巧 **知识...

    CSS代码解决浏览器兼容问题

    1. **使用浏览器前缀**:一些CSS3特性在早期版本的浏览器中需要特定的前缀,比如`-webkit-`、`-moz-`、`-ms-`和`-o-`,以确保在各个浏览器中生效。 2. **渐进增强与优雅降级**:渐进增强是在基础样式上逐步添加复杂...

    CSS文集

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

    css优先级98908u0

    important`或存在其他兼容性问题,可以考虑使用其他方法来实现相同的效果,比如使用更具体的选择器或利用条件注释来针对性地加载不同的样式表。 总之,虽然IE6在CSS支持方面存在一定的局限性,但它确实支持`!...

    css基础教程 css使用方法

    在本教程中,我们将深入探讨CSS的基础知识和使用方法。 ### 1. CSS的基本概念 CSS的核心在于定义选择器(Selectors)和声明(Declarations)。选择器指向HTML元素,声明则包含属性(Property)和值(Value),以...

Global site tag (gtag.js) - Google Analytics