CSS! Devi ripetere le stesse proprietà per ogni stato del collegamento? (link, visitato, hover ... ecc.)?
-
06-07-2019 - |
Domanda
È 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!
Soluzione
È 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.
Altri suggerimenti
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.
Seguendo la risposta di Ben:
a{ display:block; width: 50px }
a:hover, a:active{ color: #fff; }
a:visited{color: #000}