CSS的!important属性修改权重

最新推荐文章于 2025-11-03 10:15:56 发布

原创最新推荐文章于 2025-11-03 10:15:56 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #web #javascript

html 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了CSS中的!important属性，它用于提高样式规则的优先级。文章详细阐述了其定义、浏览器兼容性，特别是在IE6中的特殊行为，并总结了使用时的注意事项和权重规则。

最近在做项目中发现很多CSS代码里面都使用!important去覆盖原有高优先级的样式。按照常理来说，越是灵活的东西，需要做的工作就会更多所以就写一篇博客梳理下!important属性。

1.定义及语法

语法格式：{ cssRule !importan}，例如：box{color:red !important;}。

作用：提高指定样式规则的应用优先权（优先级）在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级。

2.浏览器识别

IE7及IE7+,Firefox,chrome等浏览器下，已经可以识别 !important属性，但是IE6.0、IE6及更早浏览器下仍然不能完全识别。!important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为! important优先级较高，否则当含! important的样式属性被同一个{}里的样式覆盖时，IE 6.0认为! important较低!

3.由于!important的样式属性和覆盖它的样式属性单独使用时需要不在一个{}里所以就有下面情况：

首先，先看下面一段代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试Css中的!Important区别</title> 
</head> 
<style type="text/css">
.testClass{ 
	color:blue !important;
}
</style>
<body>
    <div class="testClass" style="color:red;">
        测试Css中的Important
    </div>
</body>
</html>

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

这种情况也同时可以说明ie6是可以识别!important的，但是有一种情况IE6是识别不出来的，但是 IE7及IE7+,Firefox,chrome等浏览器是可以识别的。

.testClass{ 
	color:blue !important;
	color:red;
}

这样情况下!important属性，在ie6下展示的时候会显示成红色。

当然，也可以通过以下方式来让ie6识别：

.testClass{
	color:blue !important;
}
.testClass{
	color:red;
}

通过以上方式也是可以让ie6显示成蓝色的。

以上实例说明使用!important的css定义是拥有最高的优先级的。只是在ie6下出了一点小的bug，所以我们在使用!important属性的时候，需要注意书写方式。

4.总结一下

1.!important会修改当前对应元素的当前css属性和值得权重

2.!important指定的属性权重比class选择器，ID选择器，内联样式的权重都高。

3.!important只对当前元素当前属性权重有影响，对子元素权重没影响

4.如果在在不懂选择器中，相同属性和值都指定了!important，选择器权重高的属性起作用
5.注意书写方式