Rumah >hujung hadapan web >tutorial css >CSS:!important使用代码分享

CSS:!important使用代码分享

黄舟
黄舟asal
2017-07-27 11:11:342069semak 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