La spécificité du CSS est le mécanisme central qui détermine la priorité des styles et détermine la règle qui prend effet par le calcul du poids du sélecteur. Les styles en ligne marquent 1000 points, les sélecteurs d'ID marquent 100 points chacun, les classes, les attributs et les pseudo-classes marquent 10 points chacun, les éléments et les pseudo-éléments marquent 1 point chacun; Différentes scores de catégories ne peuvent pas être transportés; Par exemple, dix sélecteurs de classe (100 points) sont toujours inférieurs à un ID (100 points). Abus de! Important doit être évité, comprendre l'ordre de l'héritage et de la cascade, et analyser les conflits de style avec les outils de navigateur.

La spécificité CSS est l'un des mécanismes de base qui contr?lent les priorités du style. Autrement dit, lorsque plusieurs règles CSS sont appliquées au même élément, le navigateur déterminera quelle règle prend réellement effet en calculant la "spécificité" de chaque règle.

Qu'est-ce que la spécificité CSS?

La spécificité peut être comprise comme un système de ?poids?. Chaque sélecteur a un score spécifique, ce qui résume détermine la règle de style qui sera éventuellement appliquée.

Par exemple: si vous écrivez deux règles qui fonctionnent sur la balise <p></p> , dont p { color: red; } et l'autre est .highlight { color: blue; } , alors la classe .highlight avec une spécificité plus élevée choisira de gagner, et la couleur du texte sera bleue.

Comment calculer la spécificité?

La spécificité se compose de quatre types de "barils", de haut à bas:

• Styles en ligne (tels que style="color:red" ) → Chaque style en ligne marque 1000 points
• Sélecteur d'ID (comme #main ) → Chaque ID marque 100 points
• Class, Attribut et Pseudo-Class Seclecteurs (tels que .class , [type="text"] , :hover ) → Chaque marque 10 points
• Sélecteur d'éléments et pseudo-élément (comme div , ::before ) → Chaque scores 1 point

Par exemple:

 / * .nav #Menu → 10 100 = 110 * /
#Menu .nav {
  Couleur: vert;
}

et:

 / * div .Header: Hover → 1 10 10 = 21 * /
Div.Header: Hover {
  Contexte: jaune;
}

Remarque: les scores dans différentes catégories ne peuvent pas être transportés. Par exemple, le score total (100) de dix sélecteurs de classe n'est pas aussi bon qu'un ID (100) car ils appartiennent à différents "chiffres".

FAQ et suggestions

évitez les abus !important

Bien que !important peut forcer à écraser d'autres styles, il s'agit d'un "moyen brutal" de détruire la logique en cascade et compliquera le débogage. Sauf indication contraire, essayez de ne pas l'utiliser ou de l'utiliser moins.

Comprendre l'héritage et l'ordre en cascade

Tous les styles ne seront pas hérités, et les styles écrits dans ce qui suit prendra effet. Comprendre l'ordre d'empilement de CSS (source, importance, spécificité, ordre) peut vous aider à mieux contr?ler le comportement du style.

Utilisez des outils pour aider à l'analyse

Les développeurs de navigateurs modernes peuvent voir quelles règles chaque élément correspond et leur spécificité. Ceci est très utile pour dépanner les conflits de style.

Résumons

La compréhension de la spécificité CSS n'est pas difficile, la clé est de se rappeler qu'elle est calculée en fonction du type de sélecteur, et non de l'ordre de code ou de la position de feuille de style. Tant que vous comprenez les poids de divers sélecteurs, vous pouvez écrire des règles de style plus claires et plus contr?lables.

Fondamentalement, c'est tout.

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!