源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 375|回复: 21

[CSS] css important终级讲解

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2010-1-5 17:28:49 | 显示全部楼层 |阅读模式
很多人,包括很多网站(我所见过的所有网站,包括国内著名的‘网页设计师’网站),都说important是不被IE所支持和认识的,可是真的是这样吗?看了下边的两个例子,也许你会改变一些看法! 例一:
CSS

复制代码代码如下:
#box {
color:red !important;
color:blue;
}

HTML

复制代码代码如下:
<div id="Box"> 在不同的浏览器下,这行字的色应该不同!</div>

这个例子应该是大家经常见到的important的用法了,在IE环境下,这行字是蓝色,在firefox下,为红色,其用法不再多说了,看下一个例子。
例二:
CSS

复制代码代码如下:
1 #box div{
color:red;
}
2 .important_false{
color:blue;
}
important_true{
color:blue !important;
}

HTML

复制代码代码如下:
<div id="Box">
<div class="important_false">这一行末使用important</div>
<div class="important_true">这一行使用了important</div>
</div>

例二中,CSS代码第一行设定了box里面所有div中字体色为红色,第二行和第三行都用class重新定义了自身div的字体色为蓝色,不同的是,第二行末使用important,而第三行使用了!
默认情况下,class的优先级小于id,所以,第二行中即使用class重定义了自身样式,也无法生效,所以继承父级属性,这行字还是红色!
但是,第三行中,用了important提升优先级(或看成强制重定义),所以这里的css得以生效,这行字变为了蓝色!
从这个例子,得以证明,ie对important的并不是不支持!
那么为什么很多人都说ie不认识它呢?我想应该是大家实战中可能都没有遇到例子中的情况: 当你想提升class的优先级时怎么办?
也就是说大家可能都忽略了它的这一作用,只了解在命名为同一个元素的CSS代码块中,用它来提升排列顺序相对靠前的代码的优先级(例一)!
通过上边两个例子,得以总结:
important对 一个良好(或者是标准)的浏览器来说,不仅仅是从顺序上提升代码的优先级,还可以用来提升class的优先级(比如firefox),但是从IE对前者的不支持可以看出,这只是IE的一大BUG,而不能说它“不认识、不支持”!
然而,不管怎么样,IE的这一大BUG帮助我们解决了很多兼容性问题,这显然不是件坏事!
回复

使用道具 举报

6

主题

2万

回帖

247

积分

中级会员

Rank: 3Rank: 3

积分
247
发表于 2022-8-22 05:53:56 | 显示全部楼层
额UI废物iuhfujewfiewnnfen
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-8-29 03:33:52 | 显示全部楼层
天天源码社区。。。。
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-9-16 09:13:18 | 显示全部楼层
很不错的玩意
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

67

积分

注册会员

Rank: 2

积分
67
发表于 2022-11-16 21:47:38 | 显示全部楼层
快更新啊,我擦
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

176

积分

注册会员

Rank: 2

积分
176
发表于 2022-12-23 13:07:47 | 显示全部楼层
来看看怎么样
回复 支持 反对

使用道具 举报

12

主题

2万

回帖

431

积分

中级会员

Rank: 3Rank: 3

积分
431
发表于 2022-12-25 13:36:38 | 显示全部楼层
可以,看卡巴
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

99

积分

注册会员

Rank: 2

积分
99
发表于 2023-6-30 17:45:09 | 显示全部楼层
dfdsafdsfdsfdsf
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-8-27 11:59:27 | 显示全部楼层
非常vbcbvcvbvcb
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

186

积分

注册会员

Rank: 2

积分
186
发表于 2023-9-8 14:08:19 | 显示全部楼层
激动人心,无法言表!
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 04:00 , Processed in 0.174134 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

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