Seu próximo nível começa aqui
Seu desenvolvimento não pode ter limites. Garanta sua Assinatura Ilimitada e libere uma preparação completa com os melhores professores do Brasil.
Um analista de Tecnologia da Informação, ao realizar a...
Um analista de Tecnologia da Informação, ao realizar a manutenção de um sistema web, depara-se com um componente visual que não exibe o estilo esperado. A tarefa exige uma análise cuidadosa do código HTML e das múltiplas regras CSS aplicadas, demandando um conhecimento aprofundado sobre o modelo de cascata e as regras de especificidade que os navegadores utilizam para resolver conflitos de estilo. Analisando o trecho de código HTML e as regras CSS a seguir, e considerando as regras da cascata e especificidade do CSS, qual será a cor final aplicada ao texto do elemento <h1>?
HTML:
<section id="destaques">
<article class="post promocao">
<h1 class="titulo-principal">Oferta Especial</
<p>Descrição da oferta...</
</
</
CSS:
#destaques h1 {
color: red;
}
article.promocao h1 {
color: green;
}
h1.titulo-principal {
color: purple;
}
.post h1 {
color: blue;
}
h1 {
color: black;
}
A
Verde, porque a regra article.promocao h1 é a mais descritiva e combina dois seletores de classe, tornando-a prioritária em relação às demais regras de estilo.
B
Vermelho, pois o seletor que utiliza o ID (#destaques) possui a maior especificidade entre as regras conflitantes, sobrepondo-se às definições baseadas em classes e elementos.
C
Roxo, pois a classe .titulo-principal está aplicada diretamente no elemento <h1>, fazendo com que esta regra tenha prioridade sobre as que estilizam com base nos elementos pais.
D
Azul, pois a regra .post h1 é a última regra baseada em classe a ser declarada para um elemento pai, e a ordem de declaração é um critério de desempate importante.
E
Preto, uma vez que a presença de múltiplos seletores conflitantes pode levar o navegador a ignorar as regras complexas e aplicar apenas o estilo mais básico definido para o elemento h1.