Rumah > Artikel > hujung hadapan web > CSS：!important使用代码分享

CSS：!important使用代码分享

黄舟asal: 2017-07-27 11:11:342037semak imbas

本篇文章使用最新的IE10以及firefox与chrome测试（截止2013年5月27日22:23:22）

CSS的原理：

我们知道，CSS写在不同的地方有不同的优先级， .css文件中的定义 < 元素style中的属性，但是如果使用!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>
    <p class="testClass" style="color:red;">
        测试Css中的Important    </p></body></html>

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

这种情况也同时可以说明ie6是可以识别!important的，只是这个是ie6的一个缺陷吧。如果写成下面的样式，ie6是识别不出来的：

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

这样，在ie6下展示的时候会显示成红色。

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

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

  
color:red;  
}

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

Atas ialah kandungan terperinci CSS：!important使用代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：CSS解读前端性能优化的具体分析Artikel seterusnya：CSS中关于!important的使用方法总结

Artikel berkaitan

Lihat lagi