CSS! Você tem que repetir mesmas propriedades para cada estado link? (Link, visitou, pairar ... etc)?

StackOverflow https://stackoverflow.com/questions/1616034

  •  06-07-2019
  •  | 
  •  

Pergunta

É necessário ou má prática para propriedades de repetir que não estão mudando em cada tipo de link? Como esta:

a:link {display: block; width: 50px;}
a:visited {display: block; width: 50px; color: #000;}
a:hover {display: block; width: 50px; color: #FFF}
a:active {display: block; width: 50px; color: #FFF}

A necessidade bloco de exibição para estar em cada um? Ou isso é uma má prática? Além disso, você pode encadear estados de link? Como esta:

a:hover, a:active {display: block; width: 50px; color: #FFF}

Além disso, quando você tem um id / classe adicionada nos links, eles devem herdar os estilos padrão em primeiro lugar, em seguida, mudar para o id específico / aula? Como esta:

a:link {display: block; width: 50px; color: #000;}
....(etc)
a.menu:link {color: #FFF;}
....(etc)

Será que a exibição ligação .menu get e largura de um: link e depois é só mudar a cor

MUITO OBRIGADA por qualquer ajuda limpar tudo isso!

Foi útil?

Solução

Você pode estados elo da cadeia.

: link e: visited são os mais definições básicas para as ligações. As declarações feitas sobre eles vão estar em cada link na página, mesmo quando um link tem classes ou id.

disse que,: hover e: active não precisa display: block, se declarou em: link e:. Visitado

Outras dicas

Não há necessidade de repetir as propriedades, não tenho certeza se é "má prática" per se, mas é definitivamente algo que você poderia otimizar.

Você pode definir a {display: block; width:. 50px} e isso vai cobrir todos os estados (a menos que um é definido de forma diferente em outros lugares E sim, você também deve ser capaz de cadeia estados

.

E você está absolutamente certo, eles vão herdar o estilo atribuído ao tipo de elemento, mas id / variáveis ??nome da classe terá precedência se eles estão definidos.

Após a resposta de Ben:

a{ display:block; width: 50px }
a:hover, a:active{ color: #fff; }
a:visited{color: #000}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top