Changer le même chemin css montre un résultat différent

Ce html:Changer le même chemin css montre un résultat différent

<html> 
<head> 
<style> 
    #outter_div .span_class a {background: red;} 
    #inner_div span a {background: blue;} 
</style> 
</head> 
<body> 

<div id='outter_div'> 
<div id='inner_div'> 
    <span id='span_id' class='span_class'><a href='index.html'>link</a></span> 
</div> 
</div> 

</body> 
</html>

résultats dans RED lien.

Et si nous changeons la première ligne de css à

#span_id a {background: red;}

lien devient bleu. Les deux #outter_div .span_class a et #span_id a pointent vers le même élément.

D'où vient cette différence? Pourquoi une couleur change-t-elle quand tout est pareil?

Source

2011-11-12 Qiao

Je suis en train de résoudre ce problème - http://unraveled.com/publications/assets/css_tabs/index.html, donc l'onglet sélectionné est défini par l'ID de l'onglet, et non par l'ID du corps. – Qiao

Lisez ceci.

how to mathematically calculate the specific weight of your CSS selectors

Pour en revenir à votre question.

#span_id a {background: red;}

1, 0, 1

#inner_div span a {background: blue;}

1, 0, 2

Par conséquent, le lien est bleu.

Il était rouge avant parce que

#outter_div .span_class a {background: red;}

1, 1, 1

Source

2011-11-12 22:05:30 maxisam

La différence vient de quelque chose appelé CSS Specificity. C'est un concept qui vous permet de hiérarchiser les règles CSS en fonction du nombre de types de sélecteurs que vous utilisez: les sélecteurs d'ID ont la plus grande spécificité, et les sélecteurs d'élément ont le moins de choix.

Par exemple, les deux sélecteurs sélectionnant une balise HTML <h1 id="one" class="one">...</h1>:

#one{ 
    color: red; 
} 
.one{ 
    color: blue; 
} 
h1{ 
    color: green; 
}

Apparaît rouge. Suppression du sélecteur #one va maintenant le faire apparaître bleu, et enfin, en supprimant le sélecteur .one le fera apparaître vert. Savez-vous calculer mathématiquement le poids spécifique de vos sélecteurs CSS?

Source

2011-11-12 21:55:52 Nightfirecat

Changer le même chemin css montre un résultat différent

Répondre

Questions connexes