Den :link
væ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 :hover
pseudoklassen, :link
skal den vises først eller ellers ikke defineres overhovedet, for at :hover
typografierne skal fungere. Dette er fordi de er lige så specifikke, så hvis de :link
kom efter, ville disse stilarter tilsidesætte svæveformaterne.
Den :link
pseudo-klasse målretter mod alle elementer, der har en
href
attribut, selvom href
har 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 :link
pseudoklassen:
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 href
attribut: ,
, og
. Kun
elementet kan styles via
:link
pseudoklassen.
Du kan heller ikke føje href
attributten 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 href
det ikke er en gyldig attribut til
.
På grund af det faktum, at der kun :link
kan målrettes mod elementer,
:link
kan stilarter defineres i CSS uden elementtypevælgeren, som denne:
:link ( color: aquamarine; )
Også for alle praktiske formål, når du bruger HTML, er :link
pseudoklassen 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
href
attributsæ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 :link
pseudoklassen.
Browsersupport
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
Nogen | Nogen | Nogen | Nogen | Nogen | Nogen | Nogen |