Spécificité css lorsque l'élément DOM a plusieurs classes

Question

Je dois analyser le CSS des ensembles de documents html pour les règles qui ont un flottant: left/right.

J'ai compris comment tout fonctionne quand il y a un ensemble d'éléments DOM imbriqués dont chacun a au plus une classe. La spécificité de la règle est basée sur le numéro de sélecteur calculé, id d'abord, puis class, puis tag elem. En cas d'égalité, choisissez la règle qui vient en dernier. Donc, l'idée de spécificité est qu'au plus une règle est choisie en fonction de la spécificité du sélecteur en faisant correspondre l'élément DOM. Que dois-je faire quand il y a plusieurs classes, pas seulement à l'enfant DOM le plus profond, mais aux niveaux parents. Plusieurs classes au format simple choisissent et appliquent plusieurs règles. Mais je ne peux pas comprendre l'ensemble des lignes directrices pour déterminer comment la spécificité interagit avec cela. Par exemple. normalement, la spécificité choisit une règle, la plus haute spécificité. Mais avec plusieurs classes dans l'élément DOM terminal, dans les cas simples démontrés sur internet, les multiples règles sélectionnées par plusieurs classes ont la même spécificité. Mais je peux voir des scénarios beaucoup plus complexes, et je ne sais pas comment choisir les règles.

est ici un cas:

p.cls1 { 
} 
div#id1 p.cls2 { 
} 
.cls3 { 
} 

Html:

<div id="id1"><p class="cls1 cls2 cls3">... 

Toutes les 3 classes sélectionnées se même si tous les trois ont des nombres différents de spécificité. Cependant, je pourrais aggraver le problème en donnant plusieurs classes à la div extérieure. Impossible de trouver des informations dans la spécification css 2.1 qui indique ce qui est supposé se produire et comment plusieurs classes sélectionnent plusieurs règles, en dépit de leur spécificité.

Andy

Answer 1

Il est un peu difficile de déterminer ce que vous demandez en fait ici. Un exemple spécifique aiderait.

Mais en général, l'ordre de priorité de style du plus haut au plus bas est par:

1. Styles en ligne
2. styles inclus (même document)
3. styles de références externes

Dans tous Parmi ceux-ci, le style a une priorité supérieure, en supposant que la spécificité soit la même. Cependant, un style qui est à un niveau de préséance supérieur (tel qu'un style en ligne) écrasera toujours les autres sans tenir compte de la spécificité. Ainsi, un style en ligne sur un élément remplacera toujours les styles dans la feuille de style incluse.

est ici plus d'informations, que vous pouvez déjà savoir sur la spécificité ... http://www.htmldog.com/guides/cssadvanced/specificity/

La spécificité réelle d'un groupe de sélecteurs imbriqués prend un certain calcul . Fondamentalement, vous donnez à chaque id selector ("#whatever") une valeur de 100, chaque sélecteur de classe (".whatever") une valeur de 10 et chaque sélecteur HTML ("peu importe") une valeur de 1.Ensuite, vous les ajoutez tous et hop, vous avez la valeur de spécificité.

Tout cela étant dit, !important ajoute une autre couche où les mêmes règles, juste !important a préséance sur tous les styles !important non.

MISE À JOUR: Votre exemple est un peu curieux, et je pense que vous ne comprenez pas la spécificité. La spécificité et non signifie qu'une classe qui s'applique au même élément qu'une autre classe l'écrase complètement. Ce que cela signifie à la place est que "S'il y a attributs de style qui sont les mêmes, celui avec la spécificité supérieure écrase les autres."

Dans votre exemple, un attribut sur cls2 qui correspond à l'un des autres styles de classe les écrasera. Cependant, s'il n'y a pas de conflit de style, il n'y a pas de problème! Ça va prendre tous les styles.

Peut-être que cela vous aidera à penser à l'affectation d'une variable sur n'importe quel objet ancien. Il existe plusieurs façons de référencer la variable, mais votre spécificité définit votre ordre d'exécution. L'affectation qui définit la variable en dernier est ce qu'elle est lorsque l'objet est réellement rendu.

Answer 2

Toutes les règles de chacun des sélecteurs s'appliqueront sauf s'il y a un conflit. Donc, si vous avez ces styles:

p.cls1 { 
    margin: 10px; 
    padding: 3px 
} 

div#id1 p.cls2 { 
    margin :5px; 
    background:green; 
} 

.cls3 { 
    margin :20px; 
    position:relative 
} 

Ensuite, votre élément DOM finira par prendre:

{ margin:5px; padding:3px; background:green; position:relative; } 

margin: 5px gagne en raison de la spécificité, les autres styles appliquent tous parce qu'il n'y a pas de conflit.