Récemment, j'ai vu un blog avec une meilleure explication de la priorité CSS. Bien qu'il existe des articles connexes sur Internet, je l'ai quand même republié pour votre référence.
Explication détaillée de la prononciation de la priorité CSS. La priorité CSS comprend quatre niveaux (sélecteur dans le texte, sélecteur d'ID, sélecteur de classe, sélecteur d'élément) et le nombre d'occurrences de chaque niveau. La priorité du CSS est calculée en fonction du nombre d'occurrences de ces quatre niveaux.
Ce qui suit est une citation : [Réimprimé du blog de GOVO]
La lecture prioritaire doit être divisée en « groupes ». Les groupes sont indépendants les uns des autres et comparés de gauche à droite. Ils apparaissent en groupes, séparés par des virgules.
Exemple de code source
[www.downcodes.com] sélecteur ( a , b , c , d )
comparer : ↑ , ↑ , ↑ , ↑
le sélecteur ( a , b , c , d ), comme indiqué dans le texte original de w3c.org, est divisé en quatre groupes a, b, c, d, tous sont des entiers positifs et la valeur par défaut est 0, correspondant à différents sélecteurs les structures et les compositions se forment. Lorsque vous comparez les priorités entre les sélecteurs, comparez-les de gauche à droite. Lorsque la comparaison est plus grande, la comparaison peut être arrêtée.
Exemple de code source
[www.downcodes.com] li.red.level {} /* a=0 b=0 c=2 d=1 -> spécificité = 0 , 0 , 2 , 1 */
/*comparer ↑ , ↑ , √ */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> spécificité = 0 , 0 , 1 , 1 */
/*comparer ↑ , ↑ , ↑ , √ */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> spécificité = 0 , 0 , 1 , 3 */
/*comparer ↑ , ↑ , √ */
#x34y {} /* a=0 b=1 c=0 d=0 -> spécificité = 0 , 1 , 0 , 0 */
/*comparer ↑ , √ */
style="" /* a=1 b=0 c=0 d=0 -> spécificité = 1 , 0 , 0 , 0 */(Dans le tableau ci-dessus, ↑ signifie que la comparaison est toujours nécessaire, et √ signifie que le le résultat a été obtenu à partir d'ici résultat)
De plus, tant qu'elle est écrite correctement, la structure du sélecteur ne peut être connue approximativement qu'à partir de la priorité, comme :
1,0,0,0 indique le style au sein de l'élément ;
0,2,1,1 représente un sélecteur composé de deux sélecteurs d'ID, un sélecteur de classe ou de pseudo-classe ou d'attribut et un sélecteur d'élément.
Détails des règles de priorité CSS : Après avoir corrigé la prononciation, nous pouvons commencer à parler des règles détaillées :
La valeur du groupe a ne sera que 1 lorsque CSS est écrit dans l'attribut style, sinon elle sera 0. L'instruction de style écrite dans style n'est pas réellement un sélecteur, donc les valeurs du groupe b, c et d ici sont tous 0, et seulement les valeurs réelles. Seul le sélecteur aura les valeurs du groupe b, c, d.
La valeur du groupe b est déterminée par le sélecteur d'ID #ID, le nombre de sélecteurs d'ID et la valeur du groupe sera accumulée ;
Le groupe de valeurs c est déterminé par le sélecteur de classe, de pseudo-classe et d'attribut, et le groupe de valeurs sera accumulé ;
Le groupe de valeurs d est déterminé par le nom de l'élément, c'est-à-dire le sélecteur d'élément, et le groupe de valeurs sera accumulé ;
A noter que ces quatre jeux de valeurs correspondent à différents types de sélecteurs et ne s'influencent pas. Ils sont comparés selon les règles de lecture.
!important, le principe de proximité et l'héritage ne sont pas abordés ici, et il n'y a pas d'exemple de code. Tout le monde est invité à venir sur W3Cbbs.com pour en discuter !
Voici un exemple : problèmes de priorité CSS
La priorité CSS comprend quatre niveaux (sélecteur de texte, sélecteur d'ID, sélecteur de classe, sélecteur d'élément) et le nombre d'occurrences de chaque niveau. La priorité du CSS est calculée en fonction du nombre d'occurrences de ces quatre niveaux.
Les règles de calcul de la priorité CSS sont les suivantes :
Exemple de code source
[www.downcodes.com] * Le style défini dans la page, ajoutez 1,0,0,0
* Pour chaque sélecteur d'ID (tel que #id), ajoutez 0,1,0,0
* Ajoutez 0,0,1,0 à chaque sélecteur de classe (tel que .class), à chaque sélecteur d'attribut (tel que [attribute=]) et à chaque pseudo-classe (telle que :hover)
* Pour chaque sélecteur d'élément (tel que p) ou sélecteur de pseudo-élément (tel que :firstchild), etc., ajoutez 0,0,0,1
Ensuite, ajoutez ces quatre nombres séparément pour obtenir la valeur de chaque priorité définie par CSS.
Comparez ensuite la taille petit à petit de gauche à droite. Le style CSS avec le plus grand nombre aura une priorité plus élevée.
exemple:
fichier css ou <style> défini comme suit :
Exemple de code source
[www.downcodes.com] 1. h1 {couleur : rouge ;}
/* Un sélecteur d'élément, le résultat est 0,0,0,1 */
2. corps h1 {couleur : vert ;}
/* Deux sélecteurs d'éléments, le résultat est 0,0,0,2 */
3. h2.grape {couleur : violet ;}
/* Un sélecteur d'élément et un sélecteur de classe, le résultat est 0,0,1,1*/
4. li#answer {couleur : marine ;}
/* Un sélecteur d'élément, un sélecteur d'ID, le résultat est 0,1,0,1 */
L'attribut style de l'élément est défini comme suit :
Exemple de code source
[www.downcodes.com] h1 {couleur : bleu ;}
/* Défini dans la page, un sélecteur d'élément, le résultat est 1,0,0,1*/
Remarque : Tous les nombres sont superposés ici, (0,0,0,1)+(0,0,0,2)+(0,0,1,1)+(0,1,0, 1)+(1 ,0,0,1)=(1,1,1,6)
Depuis, la couleur de l’élément h1 est le bleu.
Avis:
1. Le style déclaré par !important a la priorité la plus élevée. S'il y a un conflit, il sera recalculé.
2. Si les priorités sont les mêmes, sélectionnez le style qui apparaît en dernier.
3. Le style hérité a la priorité la plus basse.
