Considere o seguinte código HTML contendo uma folha de estil...

Próximas questões
Com base no mesmo assunto
Q2803513 Arquitetura de Software

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.

Alternativas

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