Comprendre en profondeur l'utilisation de !important en CSS

Cet article se concentre sur la priorité des styles CSS, en parlant principalement de CSS ! Comment utiliser les importants, les amis qui apprennent ces connaissances peuvent y jeter un œil, j'espère que cela vous sera utile !

!important fournit aux développeurs un moyen d'augmenter le poids des styles. A noter que !important est une déclaration de l'ensemble du style, incluant les attributs et valeurs d'attribut de ce style

<style type="text/css">
a{color:green!important;}
#main a{ color:blue;}
</style>
<div id="main">
<a>!important实例</a>
</div>

Pour le code ci-dessus, si l'attribut important n'est pas ajouté, la couleur du lien hypertexte sera bleu, mais après avoir ajouté un élément important, la priorité est augmentée et la couleur d'affichage est verte.

<style>
#Box div{
     color:red;
}
.important_false{
     color:blue;
}
important_true{
     color:blue !important;
}
</style>
<div id="Box">
    <div class="important_false">这一行末使用important</div>
    <div class="important_true">这一行使用了important</div>
</div>

La première ligne de code CSS définit la couleur de police de tous les divs de la boîte sur rouge. Les deuxième et troisième lignes utilisent toutes deux des classes pour redéfinir la couleur de police de leurs propres divs sur bleu, ce qui est le cas. différent. De plus, important est utilisé à la fin de la deuxième ligne, et important est utilisé à la fin de la troisième ligne !
Par défaut, la priorité de la classe est inférieure à id. Par conséquent, même si vous utilisez la classe pour redéfinir votre propre style dans la deuxième ligne, cela ne prendra pas effet. Par conséquent, si vous héritez de l'attribut parent, cette ligne est. toujours rouge !
Cependant, dans la troisième ligne, important est utilisé pour augmenter la priorité (ou considéré comme une redéfinition forcée), donc le css ici prend effet et cette ligne de texte devient bleue !

Une autre chose à noter est que si le style est écrit comme ceci :

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

Cette façon d'écrire n'est pas reconnue sous IE6 important est affiché en rouge, mais vous pouvez également l'utiliser ! la méthode suivante Laissez IE6 reconnaître !important

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

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!