Points dans la spécificité de la CSS

Question

La recherche de la spécificité, je suis tombé sur ce blog - http://www.htmldog.com/guides/cssadvanced/specificity/

Il affirme que la spécificité est d'un point de système de score pour le CSS. Il nous dit que les éléments valent 1 point, les cours sont d'une valeur de 10 points et Id sont d'une valeur de 100 points. Il va aussi sur le haut dire que ces points sont additionnés et le montant global est que du sélecteur de spécificité.

Par exemple:

corps = 1 point
corps .wrapper = 11 points
corps .wrapper #container = 111 points

Ainsi, l'utilisation de ces points d'sûrement la suite de la CSS et de l'HTML entraînera le texte en bleu:

CSS:

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
    color: blue;
}

HTML:

<div class="a">
    <div class="b">
        <div class="c">
            <div class="d">
                <div class="e">
                    <div class="f">
                        <div class="g">
                            <div class="h">
                                <div class="i">
                                    <div class="j">
                                        <div class="k">
                                            <div class="l">
                                                <div class="m">
                                                    <div class="n">
                                                        <div class="o" id="a">
                                                            This should be blue. 
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

RÉSULTAT:

http://jsfiddle.net/hkqCF/

Pourquoi le texte en rouge lorsque 15 classes serait égal à 150 points par rapport à 1 ID égal à 100 points?

EDIT:

Donc, apparemment, les points ne sont pas seulement s'élevait, ils sont concaténées. Lire plus à ce sujet ici - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html MAIS, est-ce à dire que les classes dans notre sélecteur = 0,0,15,0 OU0,1,5,0?

Mon instinct me dire que c'est l'ancien comme nous le SAVONS, le sélecteur d'ID de la spécificité ressemble à ceci: 0,1,0,0

Answer 1

Pekka la réponse est pratiquement correct, et probablement la meilleure façon de réfléchir à la question.

Cependant, comme beaucoup l'ont déjà souligné, le CSS du W3C recommandation énonce que "la Concaténation des trois nombres a-b-c (dans un système de numération avec une large base) donne la spécificité." De sorte que le geek en moi juste eu à le comprendre juste comment grand cette base est.

Il s'avère que la "très grande base" un emploi (au moins par les 4 plus couramment utilisé des navigateurs^*) pour mettre en œuvre cet algorithme standard est de 256 ou 2^{de 8}.

Ce que cela signifie, c'est qu'un style spécifié avec 0 id et 256 noms de classe va l'emporter sur un style spécifié avec seulement 1 id. J'ai testé avec des violons:

• 255 classes ne sont pas assez pour remplacer 1 id
• ...mais 256 classes sont assez pour remplacer 1 id

• ...et 256 tag-les noms sont assez pour remplacer 1 classe-nom

• ...mais, hélas 256 id sont pas assez pour remplacer 1 de style en ligne (mise à Jour 2012/8/15 -- vous devrez utiliser !important)

Donc, il y a, effectivement, un "système de points", mais ce n'est pas la base 10. C'est la base de 256. Voici comment il fonctionne:

(2⁸)² ou 65536, multiplié par le nombre d'id dans le sélecteur
+ (2⁸)¹ 256 fois le nombre de noms de classe dans le sélecteur
+ (2⁸)⁰ ou 1, multiplié par le nombre de tag de noms dans le sélecteur

Ce n'est pas très pratique pour le dos de l'enveloppe des exercices pour expliquer le concept.
C'est probablement pourquoi les articles sur le sujet ont été à l'aide de la base 10.

* [Opera utilise 2¹⁶ (voir karlcow du commentaire). Certains autres sélecteur d'utilisation de moteurs de l'infini - effectivement pas de système de points (voir Simon Sapin du commentaire).]

Mise À Jour De Juillet 2014:
Comme Blazemonger souligné plus tôt dans l'année, les navigateurs webkit (chrome, safari) apparaissent maintenant à un niveau de base de 256. Peut-être 2^{à 16}, à l'instar de l'Opéra? IE et Firefox, par exemple, utiliser 256.

Answer 2

Bonne question.

Je ne peux pas dire pour sûr - tous les articles que j'ai réussi à trouver d'éviter l'exemple de plusieurs classes, par exemple ici - mais je suppose que quand il s'agit de comparer la spécificité entre un sélecteur de classe et un ID, la classe devient calculé avec une valeur de 15 seulement, peu importe la façon dont détaillé est.

Qui correspond à mon expérience dans la façon dont la spécificité se comporte.

Cependant, il doit être certain de l'empilement des classes parce que

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

est plus spécifique que

.o

la seule explication que j'ai, c'est que la spécificité de l'empilage de classes est calculé seulement les uns contre les autres, mais pas contre l'Id.

Mise à jour:- je à mi-chemin de l'obtenir maintenant. Il n'est pas un système de points, et les informations sur les classes de 15 points est incorrect. C'est un 4-partie d'un système de numérotation très bien expliqué ici.

Le point de départ est de 4 chiffres:

style  id   class element
0,     0,   0,    0

Selon le W3C explication sur la spécificité, la specificty valeurs pour les règles précitées sont les suivantes:

#a            0,1,0,0    = 100
classes       0,0,15,0   = ... see the comments

c'est un système de numérotation avec un très grand (indéfini?) de la base.

Ma compréhension est que parce que la base est très grande, pas de numéro dans la colonne 4 peut battre un nombre > 0 dans la colonne 3, le même pour la colonne 2, colonne 1 .... Est-ce correct?

Je serais intéressé de savoir si quelqu'un à une meilleure prise en Maths que moi pourrait expliquer th système de numérotation et comment le convertir en décimal lorsque les éléments sont plus que 9.

Answer 3

Je suis actuellement en utilisant le livre CSS Maîtrise: Advanced Web Solutions en matière de Normes.

Chapitre 1, page 16, dit:

Pour calculer le degré de spécificité de la règle est, chaque type de sélecteur est attribué une valeur numérique. La spécificité de la règle est alors calculé par en additionnant la valeur de chacun des sélecteurs. Malheureusement, la spécificité n'est pas calculé en base 10, mais un haut, non spécifié, de la base de numéro. Ceci est pour s'assurer qu'un très précis sélecteur, comme un Sélecteur d'ID, n'est jamais remplacé par lots de moins spécifiques sélecteurs, comme les sélecteurs de type.

(l'emphase est mienne) et

La spécificité d'un sélecteur est décomposé en quatre constituante niveaux: a, b, c, et d de.

• si le style est un style en ligne, alors un = 1
• b = le nombre total de sélecteurs d'id
• c = le nombre de classe, pseudo-classe, et les sélecteurs d'attribut
• d = le nombre de sélecteurs de type et de pseudo-élément sélecteurs

Il va de soi que vous pouvez souvent faire le calcul en base 10, mais seulement si toutes les colonnes ont des valeurs inférieures à 10.

---

Dans votre exemple, les identifiants ne sont pas d'une valeur de 100 points; chaque vaut [0, 1, 0, 0] des points. Par conséquent, un id bat 15 cours parce qu' [0, 1, 0, 0] est plus grand que [0, 0, 15, 0] dans un nombre de base du système.

Answer 4

Je ne crois pas que l’explication du blog est correcte. La spécification est ici :

http://www.w3.org/TR/CSS2/cascade.html#specificity

« Points » d’un sélecteur de classe ne peut pas additionner à être plus important qu’un sélecteur « id ». Il ne fonctionne tout simplement comme ça.

Answer 5

Je dirais que:

Element < Class < ID

Je pense qu'ils ont seulement de la pile en fonction de ce que vous obtenez si elle est multiple de la même chose. Ainsi, une Classe sera toujours annuler l'élément et l'ID de toujours plus de la Classe, mais si elle est en bas de laquelle des 4 éléments, où 3 est bleu et 1 rouge il sera bleu.

Par Exemple:

.a .b .c .d .e .f .g .h .i .j .k .l
{
color: red;
}

 .m .n .o
{
color blue;
}

Doit tourner le rouge.

Voir Exemple http://jsfiddle.net/RWFWq/

"si 5things dire rouge et 3 dire bleu bien Ima rouge"