: collegamento - Trucchi CSS

Anonim

Il :linkselettore è una pseudo-classe che prende di mira tutti gli elementi anchor ( ) non visitati su una pagina.

a:link ( color: aquamarine; )

L'esempio sopra cambierà il colore di tutti i collegamenti non visitati in acquamarina.

Quando viene utilizzato in combinazione con la :hoverpseudo-classe, :linkdeve apparire per primo, oppure non essere definito affatto, affinché gli :hoverstili funzionino. Questo perché sono ugualmente specifici, quindi se :linkvenissero dopo, quegli stili sovrascriverebbero gli stili al passaggio del mouse.

La :linkpseudo-classe sceglierà come target tutti gli elementi che hanno un hrefattributo, anche se hrefha un valore vuoto. Quindi in quel senso è come il selettore di attributi (href).

Ciò significa che i seguenti tre elementi HTML possono essere tutti stilizzati tramite la :linkpseudo-classe:

CSS-Tricks CSS-Tricks CSS-Tricks

Il terzo esempio nel blocco di codice precedente, tuttavia, sarebbe HTML non valido.

Ci sono solo tre elementi HTML che accettano l' hrefattributo: , , e . Solo l' elemento può essere stilizzato tramite la :linkpseudo-classe.

Inoltre, non è possibile aggiungere l' hrefattributo a un altro tipo di elemento e renderlo compatibile con lo stile tramite :link. In altre parole, se avessi il seguente codice HTML:

 CSS-Tricks 

Il seguente CSS non avrebbe alcun effetto:

div:link ( color: aquamarine; )

Anche in questo caso, l'HTML fallirebbe la convalida, poiché hrefnon è un attributo valido per .

Dato che :linkpuò indirizzare solo gli elementi, gli :linkstili possono essere definiti nel CSS senza il selettore del tipo di elemento, in questo modo:

:link ( color: aquamarine; )

Inoltre, per tutti gli scopi pratici quando si utilizza HTML, la :linkpseudo-classe è in qualche modo irrilevante poiché lo stesso effetto può essere ottenuto semplicemente mirando direttamente a tutti gli elementi:

a ( color: aquamarine; )

Tuttavia, se sulla pagina sono presenti elementi che non hanno l' hrefattributo impostato (ad esempio, nelle pagine legacy che utilizzavano ), il codice precedente avrebbe come target anche quegli elementi e questo potrebbe non essere il risultato desiderato.

Va anche sottolineato che, a partire dai CSS2, altri linguaggi di documenti (oltre all'HTML) possono definire altri elementi, oltre agli ancoraggi, che possono essere stilizzati tramite la :linkpseudo-classe.

Supporto browser

Cromo Safari Firefox musica lirica IE Android iOS
Qualunque Qualunque Qualunque Qualunque Qualunque Qualunque Qualunque