CSS Cascading, bottom-up Cascading

Je suis confondu avec la façon dont CSS est en cascade, je pensais que si vous avez fait quelque chose commeCSS Cascading, bottom-up Cascading

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<style type="text/css"> 
.small p { 
    color: red; 
    font-size: 10px; 
} 
.big p { 
    color: green; 
    font-size: 50px; 
} 


.blue p { 
    color: blue; 
} 
</style> 
<title>Insert title here</title> 
</head> 
<body> 
    <div class="small"> 
     <p>Small</p> 
     <div class="big"> 
      <p>Big</p> 
      <div class="small"> 
       <div class="blue"> 
        <p>Blue inside Small</p> 

       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

Mon problème est avec le « Blue dans Small », je pensais que cette volonté être petit texte car il a une classe supérieure avec "petit" classe. Comment puis-je y parvenir? S'il vous plaît ne me dites pas de changer quoi que ce soit parce que je construis un système de template complexe que vous pouvez avoir des conteneurs (divs) à l'intérieur des conteneurs (divs) et je veux appliquer le style bottom-up!

Source

2011-05-30 user515958

Si vous voulez construire un «système de template complexe», vous devriez probablement avoir compris le fonctionnement de CSS avant de commencer à écrire du code. – BoltClock

Si vous avez du mal à comprendre la cascade, vous devriez jeter un oeil à ceci: http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg –

+1 @ Justus. J'utilise cet exemple où je peux aussi :-) – andyb

Vous avez spécifié .big p la règle après .small p est la règle dans votre CSS, donc la taille de la police sera de 50 pixels, pas 10, car les deux sélecteurs sont de même spécificité.

CSS cascades ses sélecteurs tout aussi spécifiques top-down (pour les deux règles CSS et le DOM). Vous ne pouvez pas changer à moins que vous effectuez l'une de ces:

Faire un ou plusieurs sélecteurs plus spécifiques
Utilisez !important
Modifier votre HTML

Je sais que vous avez dit ne pas suggérer tout changement, mais je le ferai de toute façon pour le bénéfice des autres - le plus simple à faire pour réaliser ce que vous voulez serait d'utiliser le combinateur > dans le second sélecteur (comme suggéré par une réponse maintenant supprimée):

.big > p { 
    color: green; 
    font-size: 50px; 
}

Source

2011-05-30 15:07:32 BoltClock

@wilmoore: Votre réponse supprimée m'a fait réaliser que j'utilisais '>' trop de fois. Je voudrais vous upvote mais le représentant +10 serait perdu au recalc depuis que vous l'avez supprimé, mais merci:/ – BoltClock

BoltClock, merci pour votre réponse, je développe le cadre avant GWT et je sais que CSS n'est pas mon domaine fort. Vous avez essentiellement des panneaux skinnés, et je dois dire que tout texte à l'intérieur de ce panneau a un texte rouge (opposé à l'arrière-plan), le problème étant que les panneaux peuvent avoir d'autres panneaux enfants avec une couleur différente. le problème avec .big> p que cela ne correspondra qu'au premier niveau! Cela devrait être une chose simple à faire. ! – user515958

CSS Cascading, bottom-up Cascading

Répondre

Questions connexes