[Dúvida] Estilização | HTML e CSS

Olá Jeanna, tudo bem?

A principal diferença é que existem algumas hierarquias em relação a esses seletores, bora analisar o código abaixo:

- HTML

<p>Olá Mundo!</p>

- CSS

:root {
  color: blue
}

* {
  color: green
}

html {
  color: yellow
}

body {
  color: pink
}

1ª ETAPA: Neste caso, a cor do texto será green, estando no topo da hierarquia o seletor *.

O seletor *, é um seletor universal e sua abrangência é a maior, pois seleciona todos os elementos.

2ª ETAPA: Removendo o bloco do seletor * no CSS, a cor do parágrafo que entra em vigência é o pink.

Isso porque após o seletor universal, na hierarquia entrará o seletor de tipo que é a tag <body>.

3ª ETAPA: Removendo o bloco da tag <body> no CSS, a nova cor do parágrafo será o blue.

O :root é uma pdeusoclasse de CSS, que corresponde ao elemento raiz ou seja, idêntico ao próprio <html>, exceto que sua especificidade é maior

4ª ETAPA: E por ter uma especificadade maior, apenas removendo o bloco do :root no CSS, que a cor yellow do <html>, entrará em vigor.

Você pode fazer esses testes que citei nesse codepen aqui.

Essa hierarquia ou especificidade é determinada com base em um algoritmo usado pelos navegadores, caso queira entender mais sobre isso, recomendo essa aba da documentação do MDN.

Espero ter ajudado, em caso de dúvidas ou dificuldades, estamos por aqui!

Abraços e bons estudos :)

Mergulhe em programação