Partager un résumé de l'utilisation de l'attribut priorité !important en CSS-tutoriel CSS-php.cn

Partager un résumé de l'utilisation de l'attribut priorité !important en CSS

高洛峰

Libérer： 2017-03-10 10:31:16

original

1804 Les gens l'ont consulté

Cet article partage un résumé de l'utilisation de l'attribut priorité !important en CSS

!important ne peut être reconnu que par Ie7.0 et Firefox, mais Ie6.0 ne peut pas s'appliquer avec succès .!important à améliorer la priorité. Ce qui suit est Son utilisation est résumée ci-dessous

Le code est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style> 
<!-- 
!important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用.!important提升优先级（或看成强制重定义--> 
<!-- 
　!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。语法格式 { 
sRule!important 
} 
，即写在定义的最后面，例如：box { 
color:red !important; 
} 
　　假如我们定义一个这样的样式： 　　　　　#box { 
background-color: #ffffff !important; 
background-color: #000000; 
} 
　　那么在支持该语法的浏览器，如Firefox、Opera中，能够理解!important的优先级，背景显示#cccccc颜色，而在IE中则显示#000000.能说它“不认识、不支持”！ 
--> 
#box p { 
color:red; 
} 
.important_false { 
color:blue; 
} 
.important_true { 
color:blue !important; 
} 
#box2 { 
background-color: #cccccc !important; 
background-color: #000000; 
} 
<!-- 
firefox： 
下面这段如果放在最上面，则是红色的， 如果放在最下面则是blue。说明如果放在最上面，#box p覆盖了#idColor，这时是id的优先级。而.important_false的class优先级小于id，没有覆盖掉#box p。 
如果放在最下面，则#idColor没有覆盖.important_false。 如果不设置id="idColor", 则是blue。说明.important_false 覆盖掉了#box p 
IE7: 
#idColor放在最下面，是红色的。放在最下面也是红色的，去掉id属性。也是红色的。说明都没覆盖#box p。 
--> 
#idColor { 
color:gray; 
} 
</style> 
</head> 
<body> 
<p id="box"> 
<p class="important_false" id="idColor">这一行末使用important。class的优先级小于id的优先级。IE7是红色，firefox是蓝色。</p> 
<p class="important_true" >这一行使用了important</p> 
</p> 
<p id="box2"> 在不同的浏览器下，这行字的色应该不同！IE7，Firefox是红色。IE6是蓝色</p> 
</body> 
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!