Raison de la priorité des propriétés CSS?

Question

Je sais en fait comment les navigateurs ont tendance à rendre les exemples suivants (résultats basés sur Opera 9.5 et Firefox 3.0), mais je ne comprends pas la raison derrière eux.

Prenez cet exemple,

<style type="text/css"> 
#outer{color:red;} 
.inner{color:blue;} 
</style> 

<div id="outer" class="outer"> 
    <div id="inner" class="inner"> 
     <span>testing</span> 
    </div> 
</div> 

Le résultat est bleu.

Cependant, voir maintenant cet exemple,

<style type="text/css"> 
#outer span{color:red;} 
.inner span{color:blue;} 
</style> 

<div id="outer" class="outer"> 
    <div id="inner" class="inner"> 
     <span>testing</span> 
    </div> 
</div> 

Le texte est maintenant rouge.

Enfin, essayer,

<style type="text/css"> 
#outer span{color:red;} 
#inner span{color:blue;} 
</style> 

<div id="outer" class="outer"> 
    <div id="inner" class="inner"> 
     <span>testing</span> 
    </div> 
</div> 

Encore une fois nous avons le texte en bleu.

Y a-t-il une raison spécifique à cette méthodologie?

(désolé le titre clair, il est le meilleur que je pouvais gérer.)

Answer 1

Dans l'exemple 1 l'élément span est pas spécifiquement ciblée, nous devons donc examiner comment CSS Inheritance est géré. La couleur est une propriété héritée, nous devons donc regarder l'élément parent le plus proche de l'étendue pour déterminer la couleur. Dans votre exemple 1 cas, la classe (.inner) a une couleur bleue définie et transmet cet héritage à la plage.

Dans l'exemple 2 l'élément span est spécifiquement ciblé par les deux règles, nous devons donc examiner la CSS Cascade pour déterminer lequel des règles qui cible l'élément est plus spécifique. La règle avec le sélecteur d'ID gagne.

Dans l'exemple 3 nous invoquons à nouveau les règles CSS Cascade et puisque les deux spécificités sont égales, la dernière règle gagne.

Notez que dans cette situation:

#outer {color: red; } 
span {color: blue; } 

Le texte sera bleu. En effet, la seconde règle cible directement l'élément et n'appelle donc pas la cascade CSS.

Plus de lecture:

• CSS Specificity Wars
• Understanding Specificity
• CSS for Poker Players

note et Divulgation: J'Authored le troisième billet de blog.

Answer 2

J'espère que cette explication aide:

EX 1) Parce que ce sont des règles générales, il applique la couleur du parent immédiat .inner

EX 2) un ID est plus spécifique qu'une classe (car il n'y a qu'un seul élément avec un identifiant donné) donc le sélecteur identifiant est considéré comme plus spécifique et important

EX 3) Parce que les 2 règles sont également spécifiques je t choisit la dernière règle

Darko

Answer 3

La cascade (le « C » en CSS) est bien défini pour permettre une définition claire de ce que les règles primeront (y compris permettant importante, l'utilisateur et les règles agents) .

Mais les règles ne sont pas non plus simples (chose de correspondance complexe avec de grandes hiérarchies spécifiées).

La dernière étape de la cascade est l'ordre des documents de la déclaration, avec le dernier gain.

Answer 4

Dans le premier exemple, le premier style s'applique à la div externe. La div interne hérite alors de ce style, mais le second style s'applique à la div interne, donc elle remplace le style hérité.

Dans le deuxième exemple, les deux styles s'appliquent à la plage. Le premier style est prioritaire car un identifiant est plus spécifique qu'une classe.

Dans le troisième exemple, les deux styles s'appliquent également à la plage. Comme ils ont la même spécificité, le dernier style a préséance juste parce qu'il est dernier.

Vous pouvez en savoir plus sur la détermination de la précédence here.

Answer 5

Le W3C a un detailed explanation exactement comment CSS est supposé en cascade et avoir la priorité.Pour votre situation exacte, voici ce qui se produit:

1. Alors que la « couleur » est une propriété héritée, les cibles de sélection interne la durée elle-même, il a la priorité. Comme ils ciblent tous les deux l'intervalle, celui qui est plus spécifique (le sélecteur d'identificateur) a désormais la priorité.

2. Ils sont maintenant tous les deux également spécifiques, et donc la déclaration qui apparaît plus tard a priorité.