: link - CSS-tricks

Anonim

Den :linkvælgeren er en pseudo-klasse, der retter sig mod alle unvisited anker ( ) elementer på en side.

a:link ( color: aquamarine; )

Eksemplet ovenfor ændrer farven på alle ubesøgte links til akvamarin.

Når den bruges i kombination med :hoverpseudoklassen, :linkskal den vises først eller ellers ikke defineres overhovedet, for at :hovertypografierne skal fungere. Dette er fordi de er lige så specifikke, så hvis de :linkkom efter, ville disse stilarter tilsidesætte svæveformaterne.

Den :linkpseudo-klasse målretter mod alle elementer, der har en hrefattribut, selvom hrefhar en tom værdi. Så i den forstand er det som attributvælgeren (href).

Dette betyder, at følgende tre HTML-elementer alle kan styles via :linkpseudoklassen:

CSS-Tricks CSS-Tricks CSS-Tricks

Det tredje eksempel i ovenstående kodeblok ville dog være ugyldig HTML.

Der er kun tre HTML-elementer, der accepterer den hrefattribut: , , og . Kun elementet kan styles via :linkpseudoklassen.

Du kan heller ikke føje hrefattributten til en anden type element og gøre den stil-kompatibel via :link. Med andre ord, hvis du havde følgende HTML:

 CSS-Tricks 

Følgende CSS ville ikke have nogen virkning:

div:link ( color: aquamarine; )

Igen ville HTML mislykkes validering, da hrefdet ikke er en gyldig attribut til .

På grund af det faktum, at der kun :linkkan målrettes mod elementer, :linkkan stilarter defineres i CSS uden elementtypevælgeren, som denne:

:link ( color: aquamarine; )

Også for alle praktiske formål, når du bruger HTML, er :linkpseudoklassen noget irrelevant, da den samme effekt kan opnås ved simpelthen at målrette mod alle elementer direkte:

a ( color: aquamarine; )

Men hvis der er nogen elementer på siden, der ikke har hrefattributsættet (for eksempel på ældre sider, der blev brugt ), ville ovenstående kode også målrette mod disse elementer, og dette er muligvis ikke det ønskede resultat.

Det skal også påpeges, at startende med CSS2 kan andre dokumentsprog (udover HTML) definere andre elementer udover ankre, der kan styles via :linkpseudoklassen.

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Nogen Nogen Nogen Nogen Nogen Nogen Nogen