您的位置：首页 > 其它

!Important的使用及测试

2015-09-06 16:33 211 查看
CSS的原理：

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

使用!important的css定义是拥有最高的优先级的。但是在ie6下出了一点小的bug，注意书写方式一般可以轻松避开的。

测试用例：
<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>测试!Important在ie6中区别</title> 

</head> 

<style type="text/css">

.testClass1{ 

color:blue !important;

}

.testClass2{ 

color:blue !important;

color: green;

}

.testClass3{ 

color: green;

color:blue !important;

}

.testClass4{ 

color:blue !important;

}

.testClass4{ 

color: green;

}

.testClass5{ 

color: green !important;

}

</style>

<body>

    <div class="testClass1" style="color:red;">

        测试Css1中的Important

    </div>

    <div class="testClass2" style="color:red;">

        测试Css2中的Important

    </div>

    <div class="testClass3" style="color:red;">

        测试Css3中的Important

    </div>

    <div class="testClass4" style="color:red;">

        测试Css4中的Important

    </div>

        <div class="testClass5" style="color:red !important;">

        测试Css5中的Important

    </div>

</body>
</html>

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

在testClass1可以说明ie6是可以识别!important的。如果写成testClass2，ie6是识别不出来的，这是ie6的小缺陷。

不过这个问题可以通过testClass4的方式解决
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航