Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Bug] Não aplica nenhuma propriedade em opções__link

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Selecionando Media Queries e atividade Aumentando o header

por Nickolas
| 44k xp | 23 posts
Assistente de Transportes

Fala, pessoal.

Verifiquei esse tópico, mas não resolveu o meu problema.

A única coisa que eu fiz de diferente da aula foi declarar a minha classe como opcoes__link (sem ç ou ~) e fiz isso com todas as outras conforme o meu código abaixo. Mas não consigo tirar o sublinhado ou mudar a cor da âncora. O que pode estar errado?

 <ul class="opcoes">
            <li class="opcoes__item">Categorias</li>
            <li class="opcoes__item"><a href=”#” class=”opcoes__link”>Favoritos</a></li>
            <li class="opcoes__item"><a href=”#” class=”opcoes__link”>Minha estante</a></li>
        </ul>

@media screen and (min-width: 1024px){
    
    .container__titulo, .container__titulo--negrito{
        font-family: var(--fonte-secundaria);
        font-size: 30px;
    }

    .container__titulo{
        font-weight: 400;
        display: block;
    }

    .container__titulo--negrito{
        font-weight: 700;
    }

    .opcoes{
        display: flex;
    }

    .opcoes__item{
        padding: 0 1em;
        text-transform: uppercase;
    }

    .opcoes__link {
        text-decoration: none;
    }

}
``
2 respostas
solução!
por Victor Costa Santos
| 1919k xp | 3680 posts
Alura Scuba Team Monitor de ForumOps

Olá, Nickolas!

No código que você compartilhou, as aspas estão sendo utilizadas de forma errada. As aspas corretas para delimitar as classes devem ser as aspas duplas ("") e não as aspas curvas (””).

Então, você pode corrigir o código substituindo as aspas curvas por aspas duplas, assim:

<ul class="opcoes">
    <li class="opcoes__item">Categorias</li>
    <li class="opcoes__item"><a href="#" class="opcoes__link">Favoritos</a></li>
    <li class="opcoes__item"><a href="#" class="opcoes__link">Minha estante</a></li>
</ul>

Dessa forma, a propriedade text-decoration: none; e a cor preta (color: var(--preto);) devem ser aplicadas corretamente na classe opcoes__link. No entanto, caso não tenha sido essa a causa do erro, seria útil compartilhar mais detalhes sobre o seu código, tanto o HTML completo do header quanto o CSS do header, para verificar se não há nenhuma interferência no seu código, dessa forma consigo lhe fornecer uma resposta mais assertiva.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Nickolas
| 44k xp | 23 posts
Assistente de Transportes

Fala, Victor.

Muito obrigado. Era esse mesmo o problema, corrigi as aspas e solucionou!!

Nossa, algo bem simples pode atrapalhar toda a execução do código, né? É bom sempre me atentar aos detalhes de como estou o escrevendo.

Valeu!