!La règle importante dans CSS a expliqué

Les propriétés CSS sont appliquées dans un ordre qui est défini en utilisant le concept de spécificité dans CSS. Cependant, parfois vous devrez peut-être accorder de l'importance à la valeur d'une propriété CSS sur les autres valeurs de la même propriété. Pour cela, le !Un mot-clé important est utilisé avec une propriété CSS pour le rendre plus important que d'autres propriétés. Cet article démontre l'utilisation du !Règle importante dans CSS.

Comment !La règle importante fonctionne dans CSS

Pour comprendre le fonctionnement, vous devez avoir une compréhension de la syntaxe suivie de !règle importante.

Le sélecteur fait référence au sélecteur CSS utilisé alors que le propriété fait référence à la propriété CSS appliquée avec certains valeur. Le placement du !Un mot-clé important est également important, et il doit être à la fin de la valeur de la propriété comme indiqué dans la syntaxe.

Comment utiliser !Règle importante dans CSS

Comme le !La règle importante ne suit pas la spécificité; donc peu importe où le !une règle importante est appliquée, il se situe au plus haut niveau de spécificité. Ayons quelques exemples pour obtenir une image plus claire de ce phénomène.

Exemple 1: Utilisation de CSS externe, interne et en ligne

Habituellement, le CSS en ligne a la priorité la plus élevée suivie du CSS interne et externe. Le code suivant utilise le !Règle importante dans une feuille de style externe pour montrer son comportement primordial.

Html

Bienvenue à Linuxhint!

Dans le code ci-dessus, un

L'élément est utilisé avec un style en ligne qui a l'intention de changer la couleur d'arrière-plan.

CSS externe

Le code ci-dessus fait référence à la feuille de style externe qui serait liée au document HTML. Il est observé que la propriété en couleur arrière !important gouverner avec ça.

CSS interne

Le code CSS ci-dessus a été utilisé comme CSS interne; Ce CSS interne essaie également de changer la couleur d'arrière-plan du

élément.

Sortir

Bien que l'entrée ait une priorité plus élevée que les. Cependant, nous avons utilisé le !Mot-clé important avec la propriété de couleur arrière-plan dans le CSS externe. Par conséquent, la couleur d'arrière-plan sera récupérée à partir du fichier CSS externe comme on peut le voir à partir de la sortie ci-dessus.

Exemple 2: Utilisation de divers sélecteurs CSS

Ici, les sélecteurs CSS tels que la classe et l'ID d'un élément sont utilisés. Le !Une règle importante est appliquée à l'intérieur de la classe d'un élément.

Html

Bienvenue à Linuxhint!

Dans le code ci-dessus, un paragraphe est créé avec id = ”para” et class = ”cl”.

CSS

Le ".Cl ”Selecteur et le«#para»Les sélecteurs CSS tentent de définir la couleur d'arrière-plan du

élément. Notez que le !important La règle est appliquée au «.CL»Selecteur .

Sortir

Bien que le sélecteur d'ID ait une priorité plus élevée que le sélecteur de classe, le !important La règle remplacera la propriété de couleur arrière utilisée dans l'id = ”para»Selecteur.

Conclusion

Le !La règle importante est très utile dans divers scénarios complexes où plusieurs feuilles de style externe et interne sont utilisées et vous voulez simplement ajouter une autre propriété CSS avec la priorité la plus élevée. Garder la signification du !Règle importante à l'esprit, cet article fournit un guide détaillé sur le travail et l'utilisation du !Règle importante dans CSS. L'utilisation du !La règle importante est illustrée en l'exerçant sur divers sélecteurs CSS et en observant qu'il remplace la propriété CSS pertinente utilisée par d'autres sélecteurs CSS.