Pourquoi dans le code suivant p> World code> est bleu plutôt que rouge? La spécificité de .my_class code> est 0,0,1,0 code>, mais il doit hériter de la couleur de #my_id code> dont la spécificité est plus haut em> à ( 0,1,0,0 code>). p>
<p id='my_id'>
Hello
<span class='my_class'>
world
</span>
</p>
4 Réponses :
Il va basé sur la spécificité et l'emplacement. La classe est appliquée directement au texte, mais l'ID est plus éloigné.
Pour une longue explication: http: // mont. SE / Cuisine / 38 / Cascading-Order-and-Héritage-In-CSS
Un moyen plus simple d'y penser, l'ordre de spécificité s'applique au même niveau , si un style est sur un parent plus local alors il s'applique, peu importe si un L'ancêtre a un style avec une spécificité plus élevée (puisqu'il est plus loin, ou moins local).
La raison pour laquelle cela se produit est due à l'héritage, non spécificité.
Regardez-le de cette façon, si la portée n'avait pas cette classe, elle hériterait de la couleur rouge du parent
élément et "monde "serait rouge. Mais notez que c'est due à l'héritage.
Lorsque vous définissez la couleur de la portée, via la classe, via la classe, la valeur héritée.
Spécificité est de déterminer la règle à utiliser dans plusieurs règles concurrentes. Dans votre exemple, il n'y a pas de règles concurrentes pour , la spécificité n'entre pas en jeu. Cependant, si vous l'avez ajouté à vos styles: vous verriez que "World" est orange en raison de la spécificité de l'ID étant plus que la classe.
voir: W3"nofollow"> W3CC: 6 Affectation de valeurs de propriété, cascade et héritage - 6.2 Héritage
Une valeur héritée prend effet pour un élément Ce style s'applique à un élément avec ... et appliquera (hériter) à un élément imbriqué dans la catégorie ... ce qui n'est plus le cas une fois que vous déclarez: id = "my_id" : Classe = "My_Class " seulement si sa couleur La propriété est par ailleurs non spécifiée.