Hiérarchie de spécificité dans CSS | Expliqué
La spécificité de CSS détermine l'ordre des sélecteurs CSS à appliquer à un élément. Par exemple, un élément peut être influencé par divers styles CSS et il serait donc difficile de s'adapter à un style. Le concept de spécificité a atténué le processus de décision de la propriété CSS à sélectionner pour un élément. Pour ce faire, une hiérarchie de spécificité est suivie qui définit un ordre de sélecteurs CSS en fonction du score de spécificité.
Cet article fournit un aperçu approfondi de la hiérarchie de spécificité avec les résultats d'apprentissage suivants:
- Hiérarchie de spécificité dans CSS
- Comment calculer le score de hiérarchie de spécificité
Hiérarchie de spécificité dans CSS
La hiérarchie de spécificité est l'ingrédient clé de la spécificité de la pratique. La hiérarchie de spécificité fait référence aux catégories de sélecteurs CSS et à leur ordre d'exécution dans CSS. Les quatre groupes suivants se réfèrent
Styles en ligne: La propriété de style utilisée à l'intérieur de l'élément et la spécificité des styles en ligne est supérieure à tous les autres groupes.
Identifiant (ID): L'attribut ID d'un élément et la spécificité est une étape après les styles en ligne.
Classes, classes pseudo, attributs: Ce groupe contient les classes, les classes pseudo (telles que: lien ,: active ,: focus) et autres attributs. Le niveau de spécificité de ce groupe est un pas en panne à partir du groupe d'identificateur.
Éléments, pseudo éléments: Ce groupe contient des éléments (P, H1, Div) et des pseudo-éléments (:: avant, :: After) . La spécificité de ce groupe est au plus bas niveau.
Comment calculer le score de hiérarchie de spécificité
Derrière le concept de hiérarchie de spécificité, il existe un calcul mathématique qui conduit à quantifier la spécificité et à hiérarchiser le sélecteur CSS en fonction de ce score. Le score peut être calculé en suivant la référence fournie ci-dessous.
| Sélecteur CSS | Score de hiérarchie de spécificité |
|---|---|
| Styles en ligne | 1000 |
| Identifiant (ID) | 100 |
| Classe, classes pseudo, attributs | dix |
| Élément, pseudo élément | 1 |
Exemple 1: sélecteurs CSS
Le code suivant pratique divers sélecteurs CSS sur un seul élément pour comprendre le processus de hiérarchie de spécificité dans CSS.
Html
Linuxhint! Une vallée de tutoriels
CSS
Dans le code CSS ci-dessus, trois sélecteurs essaient de modifier la couleur d'arrière-plan de l'élément H3. Le premier sélecteur utilise le nom de l'élément tandis que les deuxième et troisième sélecteurs exercent la classe et l'ID de l'élément H3.
Sortir
Comme la spécificité du identifiant est plus grand que le classe et le élément, Ainsi, le identifiant serait utilisé comme sélecteur CSS.
Exemple 2: Utilisation de sélecteurs CSS hybrides
Il pourrait y avoir un cas où vous devez définir des cours avec les mêmes noms. Dans un tel scénario, les sélecteurs hybrides sont exercés pour identifier de manière unique un élément spécifique. L'exemple suivant utilise le ID et classe Pour créer un sélecteur hybride.
Html
Linuxhint! Une vallée de tutoriels
Tutoriels sur HTML, CSS, Java, JQuery et JavaScript
Bienvenue à Linuxhint
Un fournisseur de contenu de qualité
Dans le code ci-dessus, deux div sont créés et chaque div a h3 avec class = ”spec” et p avec class = ”spec1". éléments.
CSS
Dans CSS ci-dessus, le #New .la spécification se réfère à l'élément H3 du div id = "new” alors que le .La spécification fait référence à tous les éléments qui ont une classe = "spec".
En gardant à l'esprit les calculs, le "#nouveau ".spec »et«.spec " avoir le score suivant.
- #nouveau .spec = 100 + 10 = 110
- .spec = 10
Sortir
À partir de la sortie, il est observé que le sélecteur CSS «#Div .spec » a été chargé car sa spécificité est supérieure à ".spec ».
Conclusion
La hiérarchie de spécificité définit la commande pour les sélecteurs CSS, le sélecteur avec un score de spécificité plus élevé a une priorité plus élevée par rapport au sélecteur qui a un score de spécificité inférieur. Dans cet article, nous avons démontré le concept de hiérarchie de spécificité et décrit les bases de la définition de la hiérarchie de spécificité. Les styles en ligne ont le score de spécificité le plus élevé et sont donc placés en haut de l'arbre de hiérarchie de spécificité, suivi de l'ID, des classes et de l'élément. De plus, nous avons également fourni la méthode pour calculer le score de spécificité des sélecteurs CSS.