J'ai le suivant HTML:
div.form-square > div {
padding: 50px;
}
.seven-col {
padding: 0;
}
3 Réponses :
Le nombre de sélecteurs de classe est égal, la comparaison est donc effectuée dans les sélecteurs de type. Le premier sélecteur a plus de sélecteurs de type afin qu'il soit plus spécifique.
Spécificité est basée sur le nombre de chaque type de sélecteur dans l'ensemble de la chose , pas pour la partie sur le côté droit de la combinaison la plus à droite.
(NB: le premier exemple a également ce que CSS 2 appelle un sélecteur enfant, mais cela ne compte pas envers la spécificité et décrit une relation entre des éléments plutôt qu'une caractéristique d'un élément, qui, probablement pourquoi CSS 3 le renommera à la combinaison enfant). div.form-carré> div se compose de 1 sélection de sélecteur de classe + 2 types de sélection (plus une combinaison enfant).
.seven-col est composé de 1 sélecteur de classe.
En d'autres termes, cela n'a rien à voir avec > . Les combinaisons ne sont jamais comptés dans la spécificité.
Ainsi, "plus spécifique" donné plus de sélecteurs +1, étant "à l'intérieur" n'a rien à voir avec la spécificité, car le contexte signifie rien.
Correct, la première règle est plus spécifique que la seconde, car un sélecteur de classe unique a une priorité assez faible.
Vérifiez-le avec cette calculatrice de spécificité CSS:
http://www.suzowit.com/tools/specificity.php .seven-col a 1 classe = +1
div.form-carré> div a 2 éléments et 1 classe = +3
Contexte (être "à l'intérieur") n'est pas "plus précis" car ils sont à la fois un div.
Pour moi,
Vous pouvez ensuite utiliser
div.form-Square.seven-col pour le préciser que le second avec cette structure.