Maison > interface Web > tutoriel HTML > CSS 之!important_html/css_WEB-ITnose

CSS 之!important_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:38:05
original
1455 Les gens l'ont consulté

今天写代码,碰到一个关于!important的问题。由于之前并没有好好理解这个概念,所以今天特意查了下资料做个总结。

CSS的原理:

我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义

首先,先看下面一段代码:

<!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>
Copier après la connexion

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

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

.testClass{ color:blue !important;color:red;}
Copier après la connexion

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

当然,也可以通过以下方式来让ie6识别:

.testClass{ 
color:blue !important; 

.testClass{ 
color:red; 
}

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

以上实例说明使用!important的css定义是拥有最高的优先级的。只是在ie6下出了一点小的bug,注意书写方式一般可以轻松避开的。



版权声明:本文为博主原创文章,未经博主允许不得转载。

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal