Todo navegador aplica estilos padrão em links <a> antes de qualquer CSS que você escreva:
- Azul (
color: #0000EE) para links não visitados - Roxo (
color: #551A8B) para links já visitados - Sublinhado (
text-decoration: underline)
Esses estilos vêm da folha de estilos do user-agent (o CSS interno do navegador). Para removê-los, você precisa sobrescrever explicitamente cada propriedade.
A forma rápida: remover sublinhado e cor individualmente
Para a maioria dos casos, remover sublinhado e cor é suficiente:
a {
text-decoration: none;
color: inherit; /* herda a cor do elemento pai */
}
a:hover {
text-decoration: underline; /* opcional: mostra sublinhado no hover */
color: #0066cc;
}
O color: inherit é mais versátil do que definir uma cor específica — o link assume a cor do elemento que o contém, o que mantém consistência sem precisar atualizar em múltiplos lugares.
A forma completa: all: unset
Para remover absolutamente todos os estilos padrão do navegador de uma vez:
a {
all: unset;
cursor: pointer; /* restaurar: cursor muda para mão ao passar o mouse */
}
O all: unset elimina cor, sublinhado, estilos de foco e qualquer outro estilo padrão. O cursor: pointer precisa ser restaurado porque o all: unset também o remove.
Essa técnica é especialmente útil quando você está construindo um componente de navegação do zero e quer partir de zero sem nenhum estilo herdado. O mesmo conceito se aplica a botões — veja como remover os estilos padrão de um botão em CSS.
A ordem correta dos estados: regra LVHA
Links têm quatro estados que precisam ser declarados em uma ordem específica para funcionar corretamente:
a:link { color: #0066cc; } /* L — link não visitado */
a:visited { color: #6600cc; } /* V — link visitado */
a:hover { color: #003399; } /* H — mouse sobre o link */
a:active { color: #cc0000; } /* A — no momento do clique */
A regra mnemônica é LVHA (Link, Visited, Hover, Active). Se você declarar :hover antes de :visited, o estilo de hover não vai sobrescrever o de visited porque a especificidade é igual e a ordem de declaração determina qual vence.
Na prática, o erro mais comum é declarar :hover antes de :visited:
/* Errado — hover não funciona em links visitados */
a:hover { color: red; }
a:visited { color: purple; }
/* Correto */
a:visited { color: purple; }
a:hover { color: red; }
Por que seu CSS pode não estar funcionando
Se você adicionou as regras mas os links continuam com o estilo padrão ou com o estilo do tema, o problema quase sempre é especificidade.
O CSS do tema WordPress (ou de um plugin) pode ter regras com maior especificidade que as suas, como:
/* Estilo do tema com especificidade maior */
.main-content .entry-content a {
color: #0066cc;
text-decoration: underline;
}
/* Sua regra com especificidade menor */
a {
color: black; /* esta perde para a regra do tema */
}
Como verificar qual regra está vencendo: Pressione F12 no Chrome, clique no link problemático e veja no painel de estilos (Styles). As regras riscadas são as que estão sendo sobrescritas. A regra sem risco é a que está sendo aplicada.
Como resolver: Adicione a mesma classe de contexto que o tema usa, ou aumente a especificidade:
/* Combinando o contexto do tema */
.main-content a {
color: black;
text-decoration: none;
}
/* Ou usando uma classe específica no seu elemento */
.meu-link {
color: black;
text-decoration: none;
}
Evite !important como primeira solução. Ele funciona mas dificulta manutenção porque sobrescreve qualquer regra futura, inclusive as suas.
A documentação MDN sobre especificidade CSS tem uma calculadora visual que ajuda a entender quais seletores ganham dos outros.
Acessibilidade: o outline de foco
Ao remover os estilos de link, é comum remover também o outline de foco:
a:focus {
outline: none; /* não faça isso sem substituir */
}
O outline indica visualmente qual elemento está selecionado quando o usuário navega com Tab. Removê-lo sem substituir por outro indicador visual quebra a experiência para pessoas que usam teclado.
A solução correta é substituir por um estilo personalizado:
a:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
border-radius: 2px;
}
O seletor :focus-visible aplica o estilo apenas na navegação por teclado, não quando o usuário clica com o mouse. Isso mantém a acessibilidade sem o outline aparecer desnecessariamente.
Para mais sobre estilização de elementos com CSS sem comprometer acessibilidade, veja como colocar texto em cima de uma imagem em HTML.
Exemplos práticos por contexto
Link no menu de navegação (sem estilo, herda cor do pai):
nav a {
text-decoration: none;
color: inherit;
}
nav a:hover {
opacity: 0.8;
}
Link no corpo do texto (mantém sublinhado no hover para indicar clicável):
.conteudo a {
color: #0066cc;
text-decoration: none;
}
.conteudo a:hover {
text-decoration: underline;
}
Link como botão (remove completamente o estilo de link):
.link-botao {
all: unset;
cursor: pointer;
display: inline-block;
padding: 10px 20px;
background-color: #0066cc;
color: white;
border-radius: 4px;
}
Perguntas frequentes
Como remover o sublinhado de todos os links do site?
Adicione no seu CSS global: a { text-decoration: none; }. Se não funcionar, o tema pode ter uma regra de maior especificidade. Inspecione o elemento no DevTools (F12) para ver qual regra está prevalecendo.
Como remover a cor azul dos links?
Use color: inherit para herdar a cor do elemento pai, ou defina uma cor específica: a { color: #333; }. Se quiser que links visitados tenham a mesma cor, adicione a:visited { color: #333; }.
Por que a { color: black } não funciona no meu site WordPress?
Provavelmente o tema tem regras com maior especificidade. Inspecione o link no DevTools e veja qual regra está sobrescrevendo a sua. Adicione o contexto correto ao seu seletor (ex: .site-content a { color: black; }).
É seguro usar all: unset em todos os links?
Sim, mas como o all: unset remove o cursor de ponteiro, sempre restaure com cursor: pointer. Para links que precisam de comportamento específico (como links de âncora ou de download), teste se o comportamento está correto após o reset.
Como manter o underline em links de texto mas remover em links de menu?
Aplique as regras separadamente para cada contexto: nav a { text-decoration: none; } para o menu e article a { text-decoration: underline; } para o conteúdo.
