css中!important的作用
我们知道，CSS写在不同的地方有不同的优先级， .css文件中的定义 < 元素style中的属性，但是如果使用!important，事情就会变得不一样。
首先，先看下面一段代码：
<!DOCTYPE HTML>
<html>
<head>
< http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
< >测试Css中的!Important区别</ >
</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表现都是一致的，都显示蓝色。
css的优先级以及!important的使用
CSS的优先级应该是作为CSS基本知识而广为知道的,所以CSS入门后，就一直把CSS的优先级记挂在心里（自觉告诉自己这地方很可能会摔跤）。起初可能是因为自己的项目经验不够丰富，或者是自己所接触到的项目都是小规模的前端，也或与自己书写CSS的习惯有关（自己基本上就是逐层书写CSS，尽量把代码写得干净整洁），CSS优先级并没有成为某次项目的绊脚石。直到某次项目，因为用到的CSS库与自己页面的设计稿有冲突，才再次重视起CSS的优先级。
以下就将有关CSS的优先级的知识进行归纳整理：
①继承的不如指定的；②id>class>标签选择符；③越具体的样式越强大；④标签 id>id;标签 class>class。
CSS优先级权重的计算方法：CSS优先级包含四个级别（标签内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优 先级，规则如下：
①元素标签中定义的样式，加1000；
②每个ID选择符，加0100；
③每个Class选择符、每个属性选择符、每个伪类，加0010；
④每个元素选择符或伪元素选择符，加0001；
将这四个数字分别累加，就得到每个CSS定义的优先级的值，然后从左到右逐位比较大小，数字大的CSS样式的优先级高。
举例：
假设对应example.html在example.css文件中定义如下样式：
1. h1{color:red;} /*一个元素选择符，结果为0001*/
2. body h1{color:green;} /*两个元素选择符，结果是0002*/
3. h2.grape{color:purple;} /*一个元素选择符、一个Class选择符，结果是0011*/
4. li#answer{color:navy;} /*一个元素选择符，一个ID选择符，结果是0101*/
而同时在example.html中有：
<style>
h1{color:blue;}
</style> /*元素标签中定义，一个元素选择符，结果是1001*/
1001是有关h1样式中计算最大的，所以h1元素的颜色应该是蓝色的。
继续阅读与本文标签相同的文章
为什么越像人的自然语言交互工具，越容易让人失望？
开发分布式SQL数据库的6种技术挑战
-
第16问：Filecoin从DSN角度解读
2026-05-14栏目： 教程
-
C/C＋从零基础到精通，究竟是如何快速完成的？其实只需要这6步！
2026-05-14栏目： 教程
-
谷歌再爆重大安全漏洞！华为却成最大赢家？网友：这谁还敢用！
2026-05-14栏目： 教程
-
Excel崩溃文件如何找回
2026-05-14栏目： 教程
-
又一外国巨头宣布退出中国，关闭120家店，网友：中国钱不好赚了！
2026-05-14栏目： 教程