请选择 进入手机版 | 继续访问电脑版

应天论坛

 找回密码
 参与我们

QQ登录

只需一步,快速开始

搜索
查看: 848|回复: 3

CSS中!important的使用

[复制链接]

11

主题

13

帖子

125

积分

秀才

Rank: 2

积分
125
发表于 2017-10-10 05:41:41 | 显示全部楼层 |阅读模式
本篇文章使用最新的IE10以及firefox与chrome测试(截止2017年9月27日11:12:11)

CSS的原理:

我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样。

首先,先看下面一段代码:

[mw_shl_code=html,true]<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试Css中的!Important区别</title>
</head>
<style type="text/css">
.testClass{
color:blue !important;
}
</style>
<body>
    <div class="testClass" style="color:red;">
        测试Css中的Important
    </div>
</body>
</html>[/mw_shl_code]

虽然元素的style中有testClass类的定义,但是在上面的css定义中的用!important限定的定义却是优先级最高的,无论是在ie6-10或者Firefox和Chrome表现都是一致的,都显示蓝色。

这种情况也同时可以说明ie6是可以识别!important的,只是这个是ie6的一个缺陷吧。如果写成下面的样式,ie6是识别不出来的:

[mw_shl_code=css,true].testClass{
color:blue !important;
color:red;
}[/mw_shl_code]

这样,在ie6下展示的时候会显示成红色。

当然,也可以通过以下方式来让ie6识别:

[mw_shl_code=css,true].testClass{
color:blue !important;
}
.testClass{
color:red;
}[/mw_shl_code]

通过以上方式也是可以让ie6显示成蓝色的。

以上实例说明使用!important的css定义是拥有最高的优先级的。只是在ie6下出了一点小的bug,注意书写方式一般可以轻松避开的。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 参与我们

本版积分规则

QQ|Archiver|手机版|小黑屋|应天社区 ( 湘ICP备17015224号 )

GMT+8, 2024-3-29 17:33 , Processed in 0.843750 second(s), 25 queries .

Powered by Discuz!

© 2001-2017 Comsenz Inc.


免责声明:
本站所发布的第三方软件及资源(包括但不仅限于文字/图片/音频/视频等仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢某程序或某个资源,请支持正版软件及版权方利益,注册或购买,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To: admin@yzqz.cn

快速回复 返回顶部 返回列表