Css
/*O container envolve todos os elementos visiveis da pagina, OS container SAO IDS*/
#container {
padding: 20px;
border: 1px solid #000;
background: #CCC;
}
/*Define os estilos da caixa reutilizavel*/
.box p{
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
/*Deixa o texto vermelho SOMENTE NOS PARAGRAFOS DENTRO DA CLASSE BOX*/
.box p{
color: #F00;
}
/*Deixa o texto cinza SOMENTE NOS PARAGRAFOS DO CONTAINER*/
#container p{
color: #333;
}
html
<div id="container">
<p>This is our content area.</p>
<div class="box">
<p>I'm in a box</p>
</div>
<div class="box">
<p> I'm also in a box!</p>
</div>
</div>
Minha duvida é porque o seletor "#conteiner p" que tem so a a especificação de cor se sobrepõem a o ".box p" só com a especificação de cor também, isso não esta contra a logica da cascata?