Tag overlay in css

Question

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>

My doubt is because the selector "#container p" which has only the color specification overlaps with the ". box p" only with the color specification too, this is not against the logic of the waterfall?

Answer 1

The selector by id # has priority over selector by class ..

In your case, the selector .box p term priority 0011 and the #container p has priority 0101, soon 101 is greater than 11.

There’s a topic about that here, whose reply informs until a website where you can do these calculations.

When two selectors have equal priority, whichever is written below.

The concept of "cascade" has nothing to do with it. It may be the subject of a new topic if you no longer have it on the site.