Considere o seguinte código HTML contendo uma folha de estil...
Considere o seguinte código HTML contendo uma folha de estilo CSS3.
<html>
<head>
<style>
body p {color:blue;}
div + p {color:red;}
div > p {color:yellow;}
</style>
</head>
<body>
<div><p>Foo</p></div>
<p>Bar</p>
<p>Void</p>
</body>
</html>
A página descrita pelo código mostrado, ao ser visualizada em um navegador, exibirá as palavras Foo, Bar e Void. Assinale a alternativa que indica a cor com que cada palavra será escrita.
- Gabarito Comentado (1)
- Aulas (1)
- Comentários (0)
- Estatísticas
- Cadernos
- Criar anotações
- Notificar Erro
Gabarito comentado
Confira o gabarito comentado por um dos nossos professores
Gabarito: A - Foo é impresso em amarelo, Bar em vermelho e Void em azul.
Vamos analisar o código HTML e CSS fornecido para entender como as cores são aplicadas aos elementos da página.
Primeiro, temos a folha de estilo CSS3 com as seguintes regras:
body p {color:blue;}
div + p {color:red;}
div > p {color:yellow;}
Essas regras significam:
- body p {color:blue;}: Todos os elementos
<p>
dentro do<body>
terão a cor azul. - div + p {color:red;}: O primeiro
<p>
imediatamente após um<div>
terá a cor vermelha. - div > p {color:yellow;}: Todo
<p>
que seja filho direto de um<div>
terá a cor amarela.
Agora, vamos analisar como essas regras são aplicadas aos elementos específicos da página:
<div><p>Foo</p></div>: O parágrafo Foo está dentro de um <div>
e é um filho direto, então a regra div > p
se aplica, e a cor será amarelo.
<p>Bar</p>: O parágrafo Bar está imediatamente após o <div>
encerrado, então a regra div + p
se aplica, e a cor será vermelho.
<p>Void</p>: O parágrafo Void está dentro do <body>
mas não é filho direto de nenhum <div>
nem está imediatamente após um <div>
, então a regra geral body p
se aplica, e a cor será azul.
Portanto, a alternativa correta é a A.
Agora vamos justificar as alternativas incorretas:
B: Incorreta porque diz que Foo é vermelho, mas Foo deve ser amarelo.
C: Incorreta porque diz que Bar é azul, mas Bar deve ser vermelho.
D: Incorreta porque diz que Bar e Void são amarelos, mas Bar deve ser vermelho e Void azul.
E: Incorreta porque diz que Bar é amarelo, mas Bar deve ser vermelho.
Gostou do comentário? Deixe sua avaliação aqui embaixo!
Clique para visualizar este gabarito
Visualize o gabarito desta questão clicando no botão abaixo