Tenho essa estrutura HTML:
<body>
<header>
</header>
<div class="limit">
<section class="conteudo">
<header>
<h1>TESTE</h1>
<h3></h3>
</header>
<article>
</article>
</section>
<section class="comentarios">
</section>
</div>
<footer>
</footer>
</body>
E essa folha de estilos CSS:
/* header principal - topo da pagina */
header{
background:#FE634A;
border-bottom:2px solid #D24726;
width:100%;
height:100px;
}
section.conteudo{
width:960px;
height:200px;
}
/* tag header da section.conteudo - titulo do artigo*/
section.conteudo header{
width:960px;
height:200px;
}
O que acontece?
O seletor 'section.conteudo header' herda os atributos 'header' que é algo que eu não aconteça, o que faço para impedir isso? Alguma solução elegante para que não aconteça isso?
No caso o meu site ta ficando assim: