Não entendi muito bem o exercício, no caso o conflito só ocorreu por causa da que a cor. A melhor especificada (no caso a da classe), irá funcionar. E como não tem nada (dentro da classe) falando sobre bordas ela funciona dentro da tag ?
Solucionado
Não entendi muito bem o exercício, no caso o conflito só ocorreu por causa da que a cor. A melhor especificada (no caso a da classe), irá funcionar. E como não tem nada (dentro da classe) falando sobre bordas ela funciona dentro da tag ?
Oi Renato,
O conflito somente aconteceu na propriedade color, que foi declarada tanto no seletor div, quanto no seletor .principal. E nesse caso o seletor de classe(.principal) tem peso maior e acaba sobrescrevendo a cor declarada no seletor de tag(div).
Mas como a propriedade border: 1px solid blue; somente foi declarada no seletor div, não houve conflito com os outros seletores, e o browser desenha a borda azul normalmente.
Ou seja, se um determinado elemento html tiver vários seletores no css, o browser vai acumulando todas as propriedades de todos os seletores, e apenas sobrescreve as que tiverem dado conflito(que foram declaradas em mais de um seletor), sendo que a que tiver o maior peso será a que o browser utilizará.
Faz sentido?
Bons estudos!
Olá Rodrigo, bom dia ! Vamos fazer um exemplo aqui para ficar mais claro
HTML --
<div principal inicial>CSS --
div{
backgroud-color: black;
font-size: 20px;
text-align: center;
}
.inicial{
font-style: italic;
color: #FFF;
text-align: justify;
}No caso do exemplo acima o CSS só iria sob escrever o text-align pois a classe tem o maior peso no CSS, o restante que foi declarado no seletor div não será mexido.
Estou correto ?
Oi Renato,
Isso mesmo!
Valeu irmão ! Muito obrigado !