[Dúvida] Estilo

Oii, Pedro! Joia?

Como sugestão, revise o seu código HTML comparando-o com o CSS. Pois, ao usar .cabecalho__navegacao--item a, o CSS procura pelo elemento âncora a dentro de um elemento com a classe .cabecalho__navegacao--item. Caso não tenha, o CSS não vai conseguir identificar o elemento e como consequência ocorre a quebra.

Uma forma de solucionar, é ajustar o seu código HTML E CSS. Ou continuar usando .cabecalho__navegacao--item para estilizar os links, como está fazendo e não está ocorrendo a quebra.

Espero ter esclarecido sua dúvida. Caso outras surjam durante os estudos, compartilhe no fórum.

Bons estudos, Pedro!

<li><a class="cabecalho__navegacao--item" href="">Blog</a></li>

Esse é o meu elemento HTML.

.cabecalho__navegacao--item {
    color: var(--branco);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

Esse é o seletor CSS, se eu coloco o a, quebra. Não consegui entender o erro, poderia explicar novamente?

Oii, Pedro! Tudo bem?

Desculpa por não ser assertiva na resposta anterior. Claro, vou te explicar, vamos lá!

Quando você escreve .cabecalho__navegacao--item a, você está basicamente dizendo ao CSS para selecionar todos os elementos <a> que estão dentro do elemento com a classe .cabecalho__navegacao--item. Isso significa que o CSS irá procurar por elementos <a> que são filhos, netos ou descendentes de um elemento com a classe .cabecalho__navegacao--item.

Em seu HTML, onde tem <a class="cabecalho__navegacao--item">, a âncora <a> já tem a classe .cabecalho__navegacao--item diretamente aplicada a ela. Sendo assim, não há necessidade de usar .cabecalho__navegacao--item a para estilizar o link, o que pode ocasionar um bug. Por isso que ao usar somente .cabecalho__navegacao--item já é suficiente para aplicar estilos diretamente ao elemento <a> que tem essa classe.

Espero ter esclarecido melhor a sua dúvida.

Abraço, Pedro!

Ataaaaaa, agora eu entendi! Sem problema algum! Muito obrigado!