2

Testando aqui, vi que, se eu usar um background-color no seletor * (asterisco), todos os elementos vão ter aquele background, mais pra frente, se eu quiser colocar um backgroud-color diferente, em uma div por exemplo, eu não consigo, qualquer lugar que eu tente atacar o background-color, mesmo usando o !Important, não funciona.

Ja, no testador de código aqui do SOpt, isso não acontece. Por que está acontecendo isso em minha página?

* {
  background-color: red;
}

div {
  background: blue;
}
<!DOCTYPE html>
<html>
<head>
	<title>Teste</title>
</head>
<body>
<div>Testando div</div>
</body>
</html>

1
  • Cara provavelmente tem algum conflito de hierarquia css no seu código. Ou vc está usando a classe no * também com !importante, ou está usando ID para colocar classe, ou algo do tipo. O seletor universal * não tem prioridade de classe não, a não ser que vc não declare classe nenhuma para os outros elementos que aceitam background
    – hugocsl
    Commented 21/05/2018 às 13:56

1 Resposta 1

0

Não, na realidade ele implementa em todos os elementos da página os estilo aplicado, ou seja, o elemento html ganha borda, o body ganha borda, e os divs também ganham bordas, porem tem baixa prioridade. Veja:

* {
  border:3px solid #000000;
}

div {
  border:3px solid #e7a500;
}
<!DOCTYPE html>
<html>
<head>
	<title>Teste</title>
</head>
<body>
<div>Testando div</div>
<div>Testando div</div>
</body>
</html>

Agora sem sobrepor a borda:

* {
  border:3px solid #000000;
}

div {
  color: #e7a500;
}
<!DOCTYPE html>
<html>
<head>
	<title>Teste</title>
</head>
<body>
<div>Testando div</div>
<div>Testando div</div>
</body>
</html>

Mais sobre

Relacionamento entre seletores:

Para estilizar um elemento que está dentro de tags especificas:

--index.html

        <footer>
            <div>
                <p class="copy">Texto</p>
                <p>Texto 1</p>
            </div>
        </footer>

--style.css

        footer div .copy{
            color: #ffffff;
        }

Apenas a cor do primeiro texto ficaria da cor branca, agora se os dois elementos utilizassem a mesma classe mas queremos utilizar cores diferentes para cada elemento:

--index.html

        <footer>
            <div>
                <p class="copy">Texto</p>
                <h1 class="copy">Texto 1</h1>
            </div>
        </footer>

--style.css

    footer div p.copy{
        color: #ffffff;
    }

    footer div h1.copy{
        color: #000000;
    }

Neste exemplo, os elementos <p> com a classe .copy ficariam da cor branca, enquanto os elementos da tag <h1> ficariam da cor preta mesmo utilizando a mesma classe. Note que a tag está grudada com o nome da classe no arquivo style.css, caso elas sejam separadas, não irá funcionar.

Seletor com relacionamento pai e filho:

Este tipo de relacionamento entre os elementos são para especificar tags que tem relacionamento de pai e filho:

--index.html

    <main>
        <header>
            <p class="tipo">Texto</p>
        <header>
        <p class="tipo">Texto 1</p>
    </main>

--style.css

    main > p.tipo{
        color: #ffffff;
    }

    main p.tipo{
        Color: red;
    } 

Neste caso, apenas o parágrafo com o conteúdo "Texto 1" irá ficar da cor branca, o parágrafo dentro da tag <header> não irá ficar branco, pois o relacionamento dele com a tag <main> não é direta, neste caso, teríamos que fazer da seguinte forma:

--style.css

    main > p.tipo{
        color: #ffffff;
    }

    main > header > p.tipo{
        color: red;
    }

Ou

    header > p.tipo{
        color: red;
    }

O texto iria ficar da cor vermelha agora, pois nossa parágrafo tem um relacionamento direto com a tag <header> que por sua vez tem relacionamento direto com a tag <main>.

Prioridade dos seletores:

Quanto mais especificado for os seletores, maior é a prioridade deles.

-- index.html

<footer>
    <p class="texto-footer">Fim do Footer</p>
    <div>
        <p>Teste</p>
        <h1>Texto</h1>
    </div>
</footer>

-- style.html

footer p.texto-footer{
    color:red;
}

.texto-footer{
    color:aqua;
}

Mesmo a classe vindo depois, a cor do texto ainda será da cor vermelha, pois ela é mais especifica, utilizando tags e a classe, que apenas a classe.

Também temos o caso dos seletores dos tipos tags, classes e id, que cada um deles tem um tipo de prioridade. Por exemplo:

-- index.html

<div>
    <p>Teste</p>
    <p class="teste">Teste</p>
    <p class="teste" id="teste2">Teste</p>
</div>

-- style.css

#teste2{
    color:salmon;
}

p{
    color:springgreen;
}

.teste{
    color:slateblue;
}

Repare que mesmo criamos uma cor para cada seletor, uma cor para o seletor tag <p>, uma para a classe .teste e outra para o id #teste2, e se você percebeu que o ultimo parágrafo tem todos os três seletores, mas ficou da cor salmon. Isso ocorre devido a prioridade que os seletores tem, ou seja, o meu seletor id tem mais prioridade que o meu seletor classe, que por sua vez tem mais prioridade que o seletor tag.

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