CSS 中的 !important 属性

最新推荐文章于 2023-03-15 22:22:06 发布

weixin_30438813

最新推荐文章于 2023-03-15 22:22:06 发布

阅读量241

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cwsb/p/10410734.html

本文详细解析了CSS中!important声明如何提升样式属性的优先级，解释了其在不同情况下的表现，包括在现代浏览器及IE6及以下版本中的应用差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　!important的作用就是提高指定样式属性的优先级。

　　一般情况下，我们对同一个元素设置样式属性的时候，对同一个属性设置了两个甚至多个值，像下面这样：

1 p { /* 例1 */
2     color:red;
3     color:yellow;
4     color:blue;
5 }

　　这个时候就是后面声明的属性生效，字体显示为蓝色。

　　假设我们希望我还像上面这么写，但我希望最终生效字体显示为红色，那我们可以给红色设置!important：

1 p { /* 例2 */
2     color:red !important;    /* 设置了优先级 */
3     color:yellow;
4     color:blue;
5 }

　　那这个时候字体就会显示为红色。

　　如果有多个样式属性设置了!important，像下面这样：

1 p { /* 例3 */
2     color:green !important;　　
3     color:red !important;
4     color:yellow !important;
5     color:blue;
6 }

　　那它还是和没设置时一样，最后声明的生效，也就是说上面这个例子最终生效的颜色是黄色。

　　我们知道，CSS选择器越具体，优先级越高，例如：

 1 <head>
 2     <style>
 3         p.p1 { color:blue; }
 4         p { color:red; }
 5     </style>
 6 </head>
 7 
 8 <body>
 9     <p class="p1">p标签</p>
10 </body>

　　最终这个<p>元素显示为蓝色。

　　如果我们设置了!important给color:red;

 1 <head>
 2     <style>
 3         p.p1 { color:blue; }
 4         p { color:red !important; }    /* 设置了优先级 */
 5     </style>
 6     
 7 </head>
 8 <body>
 9     <p class="p1">p标签</p>
10 </body>

　　最终这个<p>元素显示为红色。那如果这个<p>元素设置了内联样式呢？

1 <head>
2     <style>
3         p { color:red !important; }
4     </style>
5 </head>
6 <body>
7     <p class="p1" style="color:blue">p标签</p>
8 </body>

　　最终这个<p>元素显示为红色。也就是说声明了!important的样式属性会覆盖其它任何声明。

在Internet Explorer中的 !important

　　但在IE 6及更早的版本中，不支持我们这种写法。像例3，在IE5（我用的是IE11然后再控制台中切换到IE5的方式模拟的，IE11没有模拟IE6，凑合凑合_(:з」∠)_）中运行效果是这样的：

　　没错，最终它还是显示为蓝色，!important被忽略了。让我们换一种写法：

1 p { color:blue; }
2 p { color:yellow; }
3 p { color:red !important; }/* 设置了优先级 */

　　这个时候就可以显示为红色了：

　　再看看这个例子：

1 p { color:blue; }
2 p { 
3     color:red !important;    /* 设置了优先级 */
4     color:yellow;
5 }

　　在模拟IE5的浏览器中运行效果如下：

　　个人理解：IE6及更早版本的IE浏览器中运行!important就好比说"大家都是针对这个元素设置的样式，color样式请优先使用我这个CSSRule对象（被{}包裹起来的一些样式属性）中的color样式"，而不是说"就使用我指定的color样式"。

参考资料：MDN - 优先级：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity　　

转载于:https://www.cnblogs.com/cwsb/p/10410734.html