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

[color=blue][size=large][b]基本概念[/b][/size][/color]：

• 在同一条样式定义中即大括号[color=green]{ … }[/color]中（即同一个选择符的选择器内）：

firefox、opera（现代浏览器）优先认领

而ie会忽略!important字符串。

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

[size=medium][b]例一，在同一个选择符的选择器内[/b][/size]：

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

根据上述基本概念，得出结论：

在ie下，由于在同一个[color=green]{ … }[/color]中，!important会被忽略，则字体颜色为绿色

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


[size=medium][b]例二，在不同选择符的选择器内[/b][/size]：

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

	/* 定义字体颜色为绿色 */
	color:green;
}

根据上述基本概念，得出结论：

由于在不同的选择符的选择器内，标有[b][color=red]!important[/color][/b]的样式对[b]所有浏览器[/b]均优先认领，则ie与Firefox（现代浏览器）下，字体均为红色。


[size=medium][b]例三，!important还有保护的作用[/b][/size]：

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

例如：

#nav a
{

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

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