Desative a mudança de cor da etiqueta âncora quando visitada

Question 1

Tenho que desabilitar a mudança de cor de uma tag âncora quando visitada. Eu fiz isso:

a:visited{ color: gray }

(O link é cinza antes de ser visitado.) Mas esta é uma maneira em que eu declaro explicitamente a cor depois que o link é visitado, o que é novamente uma mudança de cor.

Como posso desativar a mudança de cor de uma tag âncora quando visitada sem fazer nenhuma mudança de cor explícita?

Question 2

Você não pode. Você só pode estilizar o estado visitado.

Para outras pessoas que encontrarem isso, certifique-se de que você os tenha na ordem certa:

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */

Question 3

Se você apenas deseja que a cor da âncora permaneça a mesma do elemento pai da âncora, você pode aproveitar a herança:

a, a:visited, a:hover, a:active {
  color: inherit;
}

Observe que não há necessidade de repetir a regra para cada seletor; apenas use uma lista de seletores separados por vírgulas (a ordem é importante para os pseudo-elementos âncora). Além disso, você pode aplicar os pseudo seletores a uma classe se quiser desativar seletivamente as cores âncora especiais:

.special-link, .special-link:visited, .special-link:hover, .special-link:active {
  color: inherit;
}

Sua pergunta é apenas sobre o estado visitado, mas presumi que você quisesse dizer todos os estados. Você pode remover os outros seletores se quiser permitir mudanças de cor em todos, exceto os visitados.

Question 4

Pois :hoverpara substituir :visited, e ter certeza de que :visitedé igual à cor inicial, :hoverdeve vir depois :visited.

Portanto, se você deseja desabilitar a mudança de cor, a:visiteddeve vir antes a:hover. Como isso:

a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }

Para desativar a :visitedmudança, você deve estilizá-la com uma classe não pseudo:

a, a:visited { color: gray; }
a:hover { color: red; }

Question 5

Exclua o seletor ou defina-o com a mesma cor em que o texto aparece normalmente.

Question 6

Se você usar algum pré-processador como o SASS, poderá usar o @extendrecurso:

a:visited {
  @extend a;
}

Como resultado, você verá um a:visitedseletor adicionado automaticamente para cada estilo com aseletor, então seja cuidadoso com ele, porque sua tabela de estilos pode aumentar muito de tamanho.

Como um meio-termo, você pode adicionar @extend apenas nos blocos de que realmente precisa.

Question 7

Para aqueles que estão aplicando classes dinamicamente (ou seja, ativos): Basta adicionar uma tag "div" dentro da tag "a" com um atributo href:

<a href='your-link'>
  <div>
    <span>your link name</span>
  </div>
</a>

Question 8

Você pode resolver esse problema chamando a:linke os a:visitedseletores juntos. E siga com o a:hoverseletor.

a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}

Question 9

Acho que se eu definir uma cor para a:visitedela não é bom: você deve saber a cor padrão da tag ae sempre sincronizá-la com a:visited.

Não quero saber sobre a cor padrão (pode ser definida em common.cssseu aplicativo ou você pode usar estilos externos).

Acho que é uma boa solução:

HTML:

<body>
    <a class="absolute">Test of URL</a>
    <a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>

CSS:

.absolute{
    position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
    text-decoration: none;
    color: transparent;
}

Question 10

a {
    color: orange !important;
}

!importanttem o efeito de que a propriedade em questão não pode ser substituída, a menos que outra !importantseja usada. Geralmente, é considerado uma prática !importantinadequada usar, a menos que seja absolutamente necessário; no entanto, não consigo pensar em nenhuma outra maneira de 'desabilitar' :visitedusando apenas CSS.

Question 11

Usar:

a:visited {
    text-decoration: none;
}

Mas isso afetará apenas os links que ainda não foram clicados.

Answer 1

Tenho que desabilitar a mudança de cor de uma tag âncora quando visitada. Eu fiz isso:

a:visited{ color: gray }

(O link é cinza antes de ser visitado.) Mas esta é uma maneira em que eu declaro explicitamente a cor depois que o link é visitado, o que é novamente uma mudança de cor.

Como posso desativar a mudança de cor de uma tag âncora quando visitada sem fazer nenhuma mudança de cor explícita?

Answer 2

106

Você não pode. Você só pode estilizar o estado visitado.

Para outras pessoas que encontrarem isso, certifique-se de que você os tenha na ordem certa:

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */

Rich Bradshaw
fonte

4

Para ser realmente anal sobre isso, não deve o aser a:link?

nikc.org

1

Acho que sim, embora raramente faça isso.

Rich Bradshaw

2

@ nikc.org não são nada anal a:linke nãoa são iguais. Uma âncora não precisa ser necessariamente um link. Normalmente muda de cor apenas quando contém um link.

rustyx

Answer 3

4

Para ser realmente anal sobre isso, não deve o aser a:link?

nikc.org

Answer 4

1

Acho que sim, embora raramente faça isso.

Rich Bradshaw

Answer 5

2

@ nikc.org não são nada anal a:linke nãoa são iguais. Uma âncora não precisa ser necessariamente um link. Normalmente muda de cor apenas quando contém um link.

rustyx

Answer 6

207

Se você apenas deseja que a cor da âncora permaneça a mesma do elemento pai da âncora, você pode aproveitar a herança:

a, a:visited, a:hover, a:active {
  color: inherit;
}

Observe que não há necessidade de repetir a regra para cada seletor; apenas use uma lista de seletores separados por vírgulas (a ordem é importante para os pseudo-elementos âncora). Além disso, você pode aplicar os pseudo seletores a uma classe se quiser desativar seletivamente as cores âncora especiais:

.special-link, .special-link:visited, .special-link:hover, .special-link:active {
  color: inherit;
}

Sua pergunta é apenas sobre o estado visitado, mas presumi que você quisesse dizer todos os estados. Você pode remover os outros seletores se quiser permitir mudanças de cor em todos, exceto os visitados.

Ryan
fonte

Funcionou muito bem, obrigado! Como uma observação para os outros, você pode ter que adicionar! Importante à etiqueta de cor para que ela seja adequada, dependendo do que mais está em seu site: cor: herdar! Importante;

Mmm

3

No Chrome, isso simplesmente renderiza o texto do link em preto.

RajV

4

Existe alguma maneira de ter a:linkser a cor do link padrão (geralmente azul) e tem a:visitedherdar de que, sem qualquer hard-coding "azul"?

enferrujado

Answer 7