1
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?

0

1 Resposta 1

0

O seletor por id # tem prioridade sobre o seletor por classe ..

No seu caso, o seletor .box p term prioridade 0011 e o #container p tem prioridade 0101, logo 101 é maior que 11.

Existe um tópico a respeito disso aqui, cuja resposta informa até um site onde você pode fazer esses cálculos.

Quando dois seletores possuem prioridade iguais, prevalecerá o que estiver escrito mais abaixo.

O conceito de "cascata" não tem a ver com isso. Pode ser assunto para um novo tópico, se já não o tiver no site.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .