Comment la spécificité CSS est-elle calculée ?

Question

En faisant des recherches sur la spécificité, je suis tombé sur ce blog - http://www.htmldog.com/guides/cssadvanced/speciality/

Il indique que la spécificité est un système de notation pour CSS. Il nous indique que la valeur de l'élément est de 1 point, la valeur de la classe est de 10 points et la valeur de l'ID est de 100 points. Il poursuit en disant que ces scores sont additionnés et que le score total constitue la spécificité du sélecteur.

Par exemple :

corps corps .wrapper body .wrapper #container

Donc, en utilisant ces scores, je m'attendrais à ce que les CSS et HTML suivants fassent virer le texte en bleu :

#a {
    La couleur rouge;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  Couleur bleue;
}

  

    

      

        

          

            

              

                

                  

                    

                      

                        

                          

                            

                              Cela devrait être bleu.
                            
                          
                        
                      
                    
                  
                
              
            
          
        
      
    
  





Pourquoi le texte est-il rouge lorsque 15 classes valent 150 points et 1 ID équivaut à 100 points ? 

Évidemment, ces scores ne se contentent pas de s'additionner, ils sont connectés. Pour en savoir plus ici - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html 

Est-ce que cela signifie que la classe dans notre sélecteur = 0,0,15,0 ou 0,1,5,0 ? 

(Mon intuition me dit que ce devrait être le premier, car nous savons que la spécificité du sélecteur d'ID est la suivante : 0,1,0,0)

Answer 1

Bonne question.

Je ne suis pas sûr - tous les articles que j'ai trouvés évitent l'exemple de classes multiples, comme ici - mais je suppose que lorsqu'il s'agit de comparer la spécificité entre un sélecteur de classe et un ID, la classe le fera ne peut être évalué que comme une valeur de 15, aussi détaillée soit-elle.

Cela correspond à mon expérience avec des comportements sexuels spécifiques.

Cependant, doit avoir une certaine superposition de cours car

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o

Mieux que

.o

Pour être plus précis, ma seule explication est que la spécificité des classes empilées est uniquement calculée les unes par rapport aux autres, pas par rapport à l'ID.

MISE À JOUR : Je comprends en quelque sorte maintenant. Il ne s'agit pas d'un système de points et les informations sur la pondération des classes étant de 15 points sont incorrectes. Il s'agit d'un système de numérotation en 4 parties très bien expliqué qui peut être trouvé ici.

Le point de départ est 4 chiffres :

style  id   class element
0,     0,   0,    0

Selon l'explication de la spécificité du W3C, la valeur de spécificité des règles ci-dessus est :

#a            0,1,0,0    = 100
classes       0,0,15,0   = ...请参见评论

Il s'agit d'un système de numérotation avec une base très large (indéfinie ?).

Je crois comprendre que puisque la base est très grande, aucun nombre dans la colonne 4 ne peut battre un nombre supérieur à 0 dans la colonne 3, il en va de même pour la colonne 2 et il en va de même pour la colonne 1.... Est-ce compris, n'est-ce pas ?

Je me demandais si quelqu'un ayant une meilleure compréhension des mathématiques pourrait expliquer ce système de numérotation et comment le convertir en décimal lorsque les éléments individuels sont supérieurs à 9.

Answer 2

La réponse de Pekka est factuellement correcte et probablement la meilleure façon de réfléchir à cette question.

Cependant, comme beaucoup l'ont déjà souligné, la recommandation CSS du W3C stipule : « La concaténation des trois nombres abc (dans un système numérique à grande base) donne de la spécificité. » Le geek en moi doit donc découvrir la taille de cette base.

Il s'avère que la "très grande base" (par au moins 4 des navigateurs les plus couramment utilisés ^*) qui implémente cet algorithme standard est de 256 ou 2⁸.

Cela signifie qu'un style spécifié avec 0 identifiant et 256 noms de classe remplacera un style spécifié avec seulement 1 identifiant. Je l'ai testé avec quelques violons :

• 255 noms de classe ne suffisent pas pour couvrir 1 identifiant

• ...Mais 256 noms de classes suffisent pour couvrir 1 identifiant

• ...et 256 noms de tags suffisent pour couvrir 1 nom de classe

• ... mais malheureusement, 256 identifiants ne suffisent pas pour couvrir 1 style en ligne (mis à jour le 15/8/2012 -- vous devrez utiliser !important)

Il existe donc effectivement un « système de points », mais il n'est pas basé sur une base 10, mais sur une base 256. Voici comment cela fonctionne :

(2⁸)² ou 65536, multiplié par le nombre d'identifiants dans le sélecteur

• (2⁸)¹ ou 256, multiplié par le nombre de noms de classes dans le sélecteur
• (2⁸)⁰ ou 1, multiplié par le nombre de noms de tags dans le sélecteur

Ce n'est pas très pratique pour une communication conceptuelle simple.
C'est probablement la raison pour laquelle les articles sur ce sujet ont toujours utilisé des systèmes basés sur la base 10.

***** [Opera utilise 2¹⁶ (voir le commentaire de karlcow). Certains autres moteurs de sélection utilisent infinity - effectivement aucun système de points (voir le commentaire de Simon Sapin). ]

Mise à jour, juillet 2014 :
Comme Blazemonger l'a souligné plus tôt cette année, les navigateurs webkits (Chrome, Safari) semblent désormais utiliser une base supérieure à 256. Peut-être 2¹⁶, comme Opera ? IE et Firefox en utilisent toujours 256.

Mise à jour, mars 2021 :
Firefox n'utilise plus 256 comme base.