Maison >interface Web >tutoriel CSS >Comment est calculé le score de spécificité CSS ?
Comment est calculé le score de spécificité CSS ?
- 王林avant
- 2023-09-14 14:09:142625parcourir
Spécificité CSS, est un processus de différenciation ou de priorisation de différents sélecteurs CSS en fonction de points, le sélecteur avec les points de spécificité les plus élevés gagnera et les styles CSS de ce sélecteur seront appliqués à cet élément.
La hiérarchie des points de chaque sélecteur CSS et sa priorité sont indiquées dans le tableau ci-dessous -
| Sr No. | est :numéro de série | .Sélecteur CSS | Score de spécificité |
|---|---|---|---|
| 1 | Sélecteur d'éléments | 1 | |
| 2 | Sélecteur de classe | 10 | |
| 3 | Sélecteur d'ID | 100 | |
| 4 | CSS en ligne | 1000 | |
| 5 | Sélecteur d'élément + classe | 1 + 10 = 11 | |
| 6 | Sélecteur Élément+ID | 1 + 100 = 101 |
Cas d'utilisation - Supposons que vous ayez un élément avec une classe et un ID et que vous souhaitiez y ajouter des styles CSS à l'aide du sélecteur de classe et du sélecteur d'ID. Dans ce cas, il utilisera les styles CSS définis par le sélecteur d'ID puisque les sélecteurs d'ID sont 10 fois plus spécifiques que les sélecteurs de classe.
Comprenons maintenant en détail la différence entre ces sélecteurs et leur priorité à l'aide d'exemples de code.
Étapes
Étape 1 - Dans la première étape, nous définirons un élément HTML avec les attributs class et ID.
Étape 2 - Dans cette étape, nous allons écrire du CSS pour les éléments en les sélectionnant à l'aide des sélecteurs CSS et en vérifiant leur priorité.
Exemple
est :Exemple
L'exemple suivant illustrera les différences entre les différents sélecteurs CSS et leur priorité -
<html>
<head>
<style>
/* CSS of the main Div using Class = 10 points and ID = 100 points selectors */
#IdDemo {
background-color: #84abb5;
color: white;
height: 150px;
text-align: center;
}
.classDemo {
background-color: green;
color: white;
height: 400px;
text-align: end;
}
/* Heading Styles to show difference between only class = 10 points and element + class selector = 11 points */
h2.demoH2Class {
color: #e6d4b6;
background-color: #414141;
}
.demoH2Class {
color: red;
background-color: white;
}
</style>
</head>
<body>
<div id = "IdDemo" class = "classDemo">
<h2 class = "demoH2Class" id = "demoH2ID"> This is Heading of Demo element. </h2>
</div>
</body>
</html>
Dans l'exemple ci-dessus, nous avons utilisé la même propriété CSS sur le même élément en sélectionnant le même élément à l'aide de deux sélecteurs différents et nous pouvons clairement voir la sélection avec des points de spécificité plus élevés Le CSS du navigateur est appliqué à l'élément .
Exemple 2
L'exemple ci-dessous expliquera plus en détail les différences des sélecteurs CSS dans leurs points spéciaux -
<html>
<head>
<style>
/* CSS of the main Div using and element + ID = 101 points selectors */
div#IdDemo {
background-color: green;
color: blue;
height: 250px;
text-align: start;
}
/* Heading Styles to show difference between only ID = 100 points and element + ID = 101 points selector */
h2#demoH2ID {
color: #e6d4b6;
background-color: #414141;
}
#demoH2ID {
color: red;
background-color: white;
}
</style>
</head>
<body>
<!-- CSS of the main div is given inline = 1000 points and inside the ID + element = 101 points -->
<div id = "IdDemo" class = "classDemo"
style = "background-color: #84abb5; color: white; height: 150px; text-align: center;">
<h2 class = "demoH2Class" id = "demoH2ID">This is Heading of Demo element.</h2>
</div>
</body>
</html>
Dans l'exemple ci-dessus, nous avons à nouveau utilisé la même propriété CSS mais avec des valeurs différentes dans différents sélecteurs CSS. Dans le cas de l'élément div principal, nous avons utilisé des sélecteurs en ligne et ID pour appliquer le CSS, mais comme le sélecteur en ligne a une priorité beaucoup plus élevée que le sélecteur ID, le CSS en ligne a été appliqué à l'élément. Dans le cas de l'en-tête h2, nous avons utilisé les sélecteurs ID et element+ID, le CSS de ce dernier est plus spécifique, donc le CSS du sélecteur element+ID est appliqué à cet élément.
Conclusion
Dans cet article, nous avons non seulement appris le calcul des points de spécificité CSS, mais avons également appris en détail la différence entre la priorité des CSS écrits dans différents sélecteurs CSS et leurs points de spécificité, et l'avons pratiqué avec des exemples de code. Nous avons vu la différence entre les sélecteurs CSS en sélectionnant simultanément différents sélecteurs pour donner des valeurs différentes aux propriétés CSS sur un même élément.
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!