CSS中!important的简单介绍【CSS最高优先级】

学习笔记 马富天 2016-08-26 11:11:58 82 0

【摘要】我有的时候看别人的写的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的样式。

下面给出一个完整代码:

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>CSS中!important的简单介绍</title>
  6. 		<style type="text/css">
  7. 			*{margin:0;padding:0;font-size:12px;}
  8. 			p{color:red;border:1px solid #CDCDCD;line-height:30px;margin:10px 0;}
  9. 			.red{color:red !important;}
  10. 			.p1{font-weight:800 !important;}
  11. 			.p2{font-weight:800 !important;font-weight:400;}
  12. 			.p3{font-weight:400;}
  13. 			span{display:inline-block;border:1px solid red;height:30px;}
  14. 			.span1{width:100px !important;width:200px;}	//	这种写法IE6无法识别
  15. 			.span2{width:200px;}
  16. 			.span3{width:100px !important;}
  17. 			b{color:red !important;}
  18. 			h1 b{color:yellow;}
  19. 		</style>
  20. 	</head>
  21. 	<body>
  22. 		<p class="red" style="color:blue;">这行文字应该显示红色字体</p>
  23. 		<p style="color:blue;">这行文字显示的是蓝色字体</p>
  24. 		<p class="p1 p3">这行字体是加粗的</p>
  25. 		<p class="p2 p3">这行字体在IE6浏览器是不加粗的,在其它任何浏览器下是加粗的。</p>
  26. 		<span class="span1">IE6:200px;</span>
  27. 		<span class="span3 span2">IE6:100px</span>
  28. 		<span class="span2 span3">IE6:100px</span>
  29. 		<span class="span1">其它任何浏览器100px</span>
  30. 		<h1><b>这里显示的是红色,!important是优先级最高的,不受任何后续CSS样式的覆盖。</b></h1>
  31. 	</body>
  32. </html>

IE6下面的执行效果:

请输入图片名称

其它浏览器下的执行效果:

请输入图片名称

本文不是所有人都能看懂,因为本文本身就是写给我自己看的,只作为自己的笔记。

版权归 马富天PHP博客 所有

本文标题:《CSS中!important的简单介绍【CSS最高优先级】》

本文链接地址:http://www.mafutian.net/191.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 【面试题】冒泡排序法的实现 》 下一篇《 PHP strip_tags()函数去掉HTML标签、PHP标签 》
分享到:

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多