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.