Quelle est l'ordre de priorité pour CSS?
La propriété qui a la priorité plus élevée est exécutée avant celle avec une priorité inférieure. Il y a donc une liste dans laquelle les propriétés CSS sont classées sur la base de leur priorité.
Propriétés CSS classées de la plus haute priorité au plus bas
La priorité des éléments CSS de plus haut au rang inférieur dans l'ordre est la suivante:
- Le !propriété importante
- Les propriétés CSS définissent directement sur l'élément
- Sélecteurs combinés
- Sélecteur d'identité
- Sélecteur de classe
- Sélecteur d'attribut
- Sélecteur d'élément
- *
- Styles hérités
Une brève description de chaque propriété
Discutons en détail de ces propriétés et éléments CSS dans l'ordre de leur priorité.
Le !règle importante
Il y a un "!important”Règle dans CSS selon laquelle en cas d'existence est exécutée avant toutes les autres propriétés CSS. Il déclare une propriété spécifique comme celle de la plus haute priorité ou demande au compilateur de hiérarchiser une certaine propriété lors de l'exécution du code. La propriété qui contient le «!important"La règle aura la plus haute priorité parmi toutes les autres règles.
La propriété qui a le «!important"La règle domine les autres propriétés. En fait, le «!important»Règle remplace l'importance des autres propriétés.
Écrivons un extrait de code pour comprendre l'impact de cela "!important»Règle dans un document. Voici un extrait de code HTML qui insère trois phrases simples dans la sortie:
Ceci est la ligne 1
Ceci est la ligne 2
C'est la ligne 3
Nous ajoutons trois propriétés de style CSS pour définir différentes couleurs d'arrière-plan pour chacune:
.MyClass fond de fond: rouge;#Myid fond-couleur: vert;
P Color en arrière-plan: jaune !important;
L'extrait de code a l'air de définir les trois couleurs d'arrière-plan différentes pour chacune mais le "!important»La règle insérée pour la propriété qui définit la couleur d'arrière-plan jaune domine sur toutes les autres propriétés et l'interface de sortie sera la suivante:
Cependant, parfois le «!important"La propriété ne fonctionne pas correctement à cause de plusieurs"!important»Règles pour le même type de propriété.
Les propriétés CSS sont exécutées sur la base de leur priorité. Après le "!important"Règle, toutes les propriétés s'exécutent en fonction de leur priorité déclarée.
Les propriétés CSS définissent directement sur l'élément
Lorsqu'il y a une propriété CSS qui est définie directement sur un élément de l'élément de style CSS, il aura la plus haute priorité par rapport à toutes les autres propriétés.
Sélecteurs combinés
Ceux-ci ont moins de spécificité et d'importance que les sélecteurs d'éléments directs mais une plus grande spécificité que les autres propriétés I.E Sélecteur d'ID, sélecteur de classe et sélecteur d'attributs.
Sélecteur d'identité
Il a une spécificité plus élevée que les sélecteurs de classe et d'attribut et plus bas que les sélecteurs combinés.
Sélecteur de classe
Il a une priorité plus faible que le sélecteur d'ID et une priorité plus élevée que certaines autres propriétés comme l'attribut et le sélecteur d'éléments.
Sélecteur d'attribut
Un attribut a une priorité supérieure à celle du sélecteur d'éléments et une priorité inférieure à celle du sélecteur de classe.
Sélecteur d'élément
Les sélecteurs d'éléments ont une priorité moins que l'attribut, la classe et les sélecteurs d'ID.
Le tout sélecteur (*)
Il a la plus basse priorité parmi tous les sélecteurs de l'élément de style CSS.
Styles hérités
Étant donné que les styles hérités se réfèrent au parent et non à l'élément ciblé exact lui-même, il a la priorité la plus basse dans la liste de toutes les propriétés de style dans CSS.
Expliquée ci-dessus est la liste de l'ordre de priorité des éléments de style CSS.
Conclusion
Comme toutes les autres langages de codage, CSS a également un ordre de priorité selon lequel les opérations sont effectuées. Tout en ajoutant des propriétés CSS dans n'importe quel document, le navigateur doit effacer le conflit dont les biens doivent être exécutés avant l'autre et quelle propriété l'emporte complètement sur les autres propriétés. Ainsi, le navigateur doit exécuter le code en fonction de l'ordre de priorité de CSS.