博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。
【摘要】我有的时候看别人的写的CSS中，经常会看的!important这类的，我有的时候比较好奇，但是又不去学习它，今天偶然想起来然后就想学习学习!important在CSS中的作用。
其实!important所有浏览器都是支持的，其主要功能就是把该CSS样式的设置为优先级最高，不受到其它任何样式的覆盖。
然后有一个小小的缺点，但是也不是特别影响，那就是IE6浏览器，（其实主要影响也不大）例如：
ie6中：
/*样式1*/
#a{width:100 !important;} /*有效*/
#a{width:50px;} /*无效*/
/*样式2*/
#a{width:100px !important; width:50px;} /*width:100px无效，width:50px 有效*/
即IE6不识别!important，所以导致如果在同一个{}中的同一属性，IE6会选择没有!important的样式，而在多个{}{}样式中，IE6会选择包含!important的样式。
下面给出一个完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS中!important的简单介绍</title>
<style type="text/css">
*{margin:0;padding:0;font-size:12px;} p{color:red;border:1px solid #CDCDCD;line-height:30px;margin:10px 0;} .red{color:red !important;} .p1{font-weight:800 !important;} .p2{font-weight:800 !important;font-weight:400;} .p3{font-weight:400;} span{display:inline-block;border:1px solid red;height:30px;} .span1{width:100px !important;width:200px;} // 这种写法IE6无法识别 .span2{width:200px;} .span3{width:100px !important;} b{color:red !important;} h1 b{color:yellow;}</style>
</head>
<body>
<p class="red" style="color:blue;">这行文字应该显示红色字体</p>
<p style="color:blue;">这行文字显示的是蓝色字体</p>
<p class="p1 p3">这行字体是加粗的</p>
<p class="p2 p3">这行字体在IE6浏览器是不加粗的，在其它任何浏览器下是加粗的。</p>
<span class="span1">IE6:200px;</span>
<span class="span3 span2">IE6:100px</span>
<span class="span2 span3">IE6:100px</span>
<span class="span1">其它任何浏览器100px</span>
<h1><b>这里显示的是红色，!important是优先级最高的，不受任何后续CSS样式的覆盖。</b></h1>
</body>
</html>
IE6下面的执行效果：
其它浏览器下的执行效果：
本文不是所有人都能看懂，因为本文本身就是写给我自己看的，只作为自己的笔记。
版权归 马富天个人博客 所有
本文标题：《CSS中!important的简单介绍【CSS最高优先级】》
本文链接地址：http://www.mafutian.com/191.html
转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^
顶0
踩0
| 评论审核未开启 |
|
||
|