`
五月兰
  • 浏览: 7435 次
社区版块
存档分类
最新评论

CSS !Important及感叹号(!) hack的应用

    博客分类:
  • css3
阅读更多

 

!important是我们在解决css ie6兼容性问题中最常用到一个语法,不少人误以为!important是一种hack,实际上,!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权,只是ie6不支持而已。如下:

body
{
color: black !important; /* IE6以上版本及其他浏览器中的颜色*/
color: blue;/*ie6中的颜色*/
}

实际上,在上面的例子中,ie6并非不能识别!important前面的属性“black”,只是ie6不能识别!important前面的属性“black”的优先级。如下:

body
{
color: blue;
color: black !important; /* 所有浏览器中都会显示黑色,当然这样的写法毫无意义*/
}

不难看出,!important所赋予其之前的属性值的高优先级只是浏览器的一个怪癖而已,实际上,IE7及更早版本的IE浏览器接受任意字符串替代important,并且会正常处理”!“之前的css属性值,而其它浏览器则会忽略。如下:

body
{
color: black; /*IE7以上版本IE及其他浏览器显示黑色*/
color: blue !ie; /*IE7及以下版本IE显示蓝色*/
}

这里"!"+"任意字符串"类似于星号(*)的作用,只识别IE7及以下版本IE。如下,可实现同样的效果。

body
{
color: black; /*IE7以上版本IE及其他浏览器显示黑色*/
*color: blue; /*IE7及以下版本IE显示蓝色*/
}

转载请注明转自五月兰博客,http://www.wuyuelan.com

分享到:
评论
1 楼 青春依旧 2017-12-14  
华清远见有队important有专业的讲解!免费的课程哦!大家加我扣扣了解!3398126348

相关推荐

    CSS中的!important规则:使用指南与最佳实践

    important规则是一个强大的工具,它可以在特定情况下覆盖其他CSS规则。然而,由于其对样式层叠的强烈影响,!important的使用需要谨慎。本文将深入探讨!important的工作原理、使用场景以及如何合理地应用它,以避免...

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

    2. **外部CSS文件定义了该`<a>`标签的背景样式**:为了确保此背景样式在所有情况下都能被正确应用,开发者使用了`!important`标记提高了样式的优先级。 3. **需求变更**:根据新的业务需求,当用户点击这个`<a>`标签...

    CSS中的!important属性用法

    important`是一个非常关键的属性,它用于设置一个规则具有最高的优先级,确保该规则无论在何种情况下都会被应用。这在解决浏览器兼容性问题,尤其是处理像IE这样的非标准浏览器时非常有用。 在描述中提到,由于...

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

    important`可以应用于内部样式表或外部样式表中,也可以应用于内联样式中。但是一般来说,内联样式中的`!important`会覆盖其他类型的`!important`声明。 #### 三、示例解析 在给定的示例中,我们有两个`div`元素,...

    CSS下!important属性

    important属性是用于提高CSS规则重要性的关键字,它用以在样式表中强制应用特定的样式声明,确保该声明不受其他同属性值的CSS规则影响。当一个CSS属性后面加上!important时,它会覆盖浏览器层叠样式表中任何同属性的...

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

    important`是一个权重标记,用于确保某个样式规则被优先应用,即使有其他规则尝试覆盖它。然而,在某些情况下,我们需要使用JavaScript库如jQuery来动态修改这些带有`!important`的样式属性。下面将详细介绍如何使用...

    CSS hack技巧大全

    本文将详细介绍一些常用的CSS Hack技巧,以及它们在不同浏览器中的应用。 首先,我们需要明确一点:`!important` 不应被视为一种hack手段。它主要用于提高样式的优先级,而不是用于浏览器兼容性处理。在某些情况下...

    强制CSS !important使用介绍

    important`是CSS中一个强大的工具,用于解决样式优先级问题,但应谨慎使用,以免导致样式管理的混乱。在理解和熟练掌握CSS选择器权重的基础上,合理地运用`!important`,可以更好地控制页面的呈现效果。

    从可维护性角度考虑css的!important规则的可用性

    当浏览器解析CSS时,它会根据选择器的特异性(selector specificity)和权重来确定哪些样式应该被应用。一个带有`!important`标记的样式将拥有最高的优先级,无论它的选择器特异性如何。这意味着,即使一个更具体的...

    CSS Hack 浏览器兼容文档

    2. **CSS Hack常见字符及示例**: - **星号(*)**:用来区分IE6和IE7与其他浏览器。例如,`*backgorund:red;`将只对IE6和IE7生效,设置背景色为红色。 - **叹号important(!important)**:用于优先级较高的CSS...

    曹鹏CSS视频教程-54.冲突与!important.rar

    important.rar”主要聚焦于CSS中的一个重要主题:样式冲突解决和“!important”规则的使用。CSS(Cascading Style Sheets)是网页设计中不可或缺的一部分,它赋予了HTML文档丰富的表现形式和结构,从而为用户提供更...

    区别不同浏览器CSS hack

    ### 区别不同浏览器CSS Hack知识点详解 #### CSS Hack简介 在Web开发过程中,由于不同浏览器对CSS的支持程度不一,导致同一段CSS代码在不同的浏览器中可能呈现出不同的效果。为了确保网页能在各种浏览器中正常显示...

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

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

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

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

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

    important` 关键字紧跟在属性值后面,由一个感叹号(!)引出,然后是一个分号(;)。这样指定的样式将具有更高的优先级。 ### 二、提升优先级 当多个选择器或样式规则影响同一个元素的同一属性时,`!important` ...

    CSS hack汇总

    ### CSS Hack 汇总:解决 IE6,IE7,IE8 及 Firefox 的兼容性问题 在网页设计与开发领域,确保不同浏览器间的代码兼容性是一项挑战性的任务,尤其是在处理像 Internet Explorer 6(IE6)、IE7、IE8 和 Firefox 这些...

Global site tag (gtag.js) - Google Analytics