CSS! Devi ripetere le stesse proprietà per ogni stato del collegamento? (link, visitato, hover ... ecc.)?

Question

È necessario o una cattiva pratica ripetere le proprietà che non cambiano in ciascun tipo di collegamento? In questo modo:

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}

Il blocco display deve trovarsi in ciascuno? O è una cattiva pratica? Inoltre, puoi concatenare gli stati dei collegamenti? In questo modo:

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

Inoltre, quando hai un ID / classe aggiunto sui link, dovrebbero prima ereditare gli stili predefiniti, quindi cambiare per l'id / classe specifici? In questo modo:

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

Il collegamento .menu otterrebbe la visualizzazione e la larghezza da un collegamento: e quindi cambierebbe colore?

GRAZIE MOLTO per qualsiasi aiuto per chiarire tutto questo!

Answer 1

È possibile concatenare gli stati dei collegamenti.

: collegamento e: visitato sono le definizioni più basilari per i collegamenti. Le dichiarazioni fatte su di essi saranno presenti su ogni link della pagina, anche quando un link ha classi o ID.

Detto questo,: hover e: active non hanno bisogno di display: block, se lo hai dichiarato su: link e: visitato.

Answer 2

Non è necessario ripetere le proprietà, non sono sicuro che sia "cattiva pratica" di per sé, ma è sicuramente qualcosa che puoi ottimizzare.

È possibile impostare un {display: block; larghezza: 50px} e questo coprirà tutti gli stati (a meno che uno non sia impostato diversamente altrove. E sì, dovresti anche essere in grado di concatenare gli stati.

E hai esattamente ragione, erediteranno lo stile assegnato al tipo di elemento ma le variabili id ??/ class name avranno la precedenza se sono impostate.

Answer 3

Seguendo la risposta di Ben:

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