Question

Quando usamos folhas de estilo (CSS), torna-se extremamente útil a utilização de seletores, para que possamos direcionar o estilo visual, a somente um, ou a um grupo de elementos. Para essa questão, considere os códigos envolvendo seletores:

I - ul ~ p {color: blue;}
II - ul + p {color: blue;}
III - a:hover {color:orange;}
IV - p::first-letter {float: left;font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

Relacione os seletores com as devidas explicações.

(_) Altera o efeito visual somente do primeiro caractere do parágrafo.
(_) Altera a cor do primeiro parágrafo que aparecer após uma lista desordenada.
(_) Altera a cor de todos os parágrafos que aparecerem após uma lista desordenada.
(_) Muda a cor do link , quando o mouse
estiver posicionado sobre.

Selecione a opção com a sequência correta.

II; IV; III; I.

III; II; I; IV.

IV; II; I; III.

I; IV; III; II.





IV; I; II; III.

Answer 1

Resposta:

IV; II; I; III.

Explicação:

O seletor de irmão (~) é parecido com o seletor  +, contudo, é menos restritivo. Enquanto o seletor adjacente (ul + p) só selecionará o primeiro elemento, imediatamente, após o elemento inicial, esse é mais generalista. Ele selecionará, usando o nosso exemplo acima, qualquer elemento p, desde que ele venha depois de um elemento ul.

Portanto II(+) é o segundo, e I~ o terceiro. O resto é óbvio, visto que os próprios elementos falam em inglês "first letter" e "hover".