IE与现代浏览器下CSS的!important属性使用

icecoffeemzp 2011-02-26

基本概念

•在同一条样式定义中即大括号{…}中(即同一个选择符的选择器内):

firefox、opera(现代浏览器)优先认领

而ie会忽略!important字符串。

•在非同一条样式中即不同的大括号{…}中标有!important的样式对所有浏览器均优先认领。

例一,在同一个选择符的选择器内

.class
{
	/* 定义字体颜色为红色,并设置!important属性 */
	color:red !important;
	/* 定义字体颜色为绿色 */
	color:green;
}

根据上述基本概念,得出结论:

在ie下,由于在同一个{…}中,!important会被忽略,则字体颜色为绿色

在Firefox及现代浏览器下,设置!important则会优先使用该属性值,则字体颜色为红色

例二,在不同选择符的选择器内

.class1
{
	/* 定义字体颜色为红色,并设置!important属性 */
	color:red !important;
}
.class2
{
 
	/* 定义字体颜色为绿色 */
	color:green;
}

根据上述基本概念,得出结论:

由于在不同的选择符的选择器内,标有!important的样式对所有浏览器均优先认领,则ie与Firefox(现代浏览器)下,字体均为红色。

例三,!important还有保护的作用

在任何需要保护的属性后面插入它可以避免被基于特性的属性覆盖。

例如:

#nav a
{
 
	color:red;
}
a
{
        /*因为包含了!important(对于IE浏览器同样有效)该选择器的color属性将覆盖#nav a的color属性*/
	color:teal !important;
}

通常,一个带有id名#nav的元素里的一个链接会变设设位红色,因为这个#nava比标签样式具体的多,但因为包含了!important,则会这个属性永远胜出,则在ie和现代浏览器下,字体将以teal颜色显示。

相关推荐

AlisaClass / 0评论 2020-06-10

somboy / 0评论 2020-05-13