Universal Selector Does Not Work

Question

I searched the forum and did not find similar question to this, so la vai:

I’m using visual studio code as a tool for studying html, css and js. I’m currently working with CSS, but I realized that the universal selector has no impact on the document I’m creating, where for example, something simple like changing the color of the entire document is impossible.

* {
box-sizing: border-box;
color: red
}

This at the top of the stylesheet ...

Other customizations made on the page work correctly, only the universal that does not ...

Answer 1

The universal dial * applies the style to all page elements, body, div, etc. However, as it is at the top of the page, quite probably, this style is being overwritten by the styles that follow it.

If you want to put the background red, apply it to the body, or even in the html, making sure there’s no other rule sticking out for this one. But if you want, for some reason, all elements to turn red, you have to overwrite what has already been applied to these elements.

The problem is that placing the universal selector at the bottom of the page does not have the expected effect, since for the css, it has a "weight" less than dial classes, ids, and tagNames. Behold:

.exemplo {
  width: 100px;
  height: 100px;
  background: gold;
  display: inline-block;
}
*{
  background: red;
}

<div class="exemplo"></div>
<div class="exemplo" ></div>
<div class="exemplo" ></div>
<div class="exemplo" ></div>

Note that even by placing the universal selector at the bottom of the page, the style contained in it does not overwrite what has already been passed.

The priority order of selectors on css that’s the one:

Understand it and respect it that styles will succeed.