: lenke - CSS-triks

Anonim

Den :linkVelgeren er en pseudo-klasse som er rettet mot alle unvisited anker ( ) elementer på en side.

a:link ( color: aquamarine; )

Eksemplet ovenfor vil endre fargen på alle ubesøkte lenker til akvamarin.

Når den brukes i kombinasjon med :hoverpseudoklassen, :linkmå den vises først, ellers ikke være definert i det hele tatt, for at :hoverstilene skal fungere. Dette er fordi de er like spesifikke, så hvis de :linkkom etter, ville disse stilene overstyre sveverstilene.

Den :linkpseudo-klassen vil målrette alle elementer som har en hrefegenskap, selv om hrefhar en tom verdi. Så i så måte er det som attributtvelgeren (href).

Dette betyr at følgende tre HTML-elementer alle kan utformes via :linkpseudoklassen:

CSS-Tricks CSS-Tricks CSS-Tricks

Det tredje eksemplet i kodeblokken ovenfor vil imidlertid være ugyldig HTML.

Det er bare tre HTML-elementer som aksepterer hrefegenskap: , og . Bare elementet kan styles via :linkpseudoklassen.

Du kan heller ikke legge til hrefattributtet til en annen type element og gjøre det stilart via :link. Med andre ord, hvis du hadde følgende HTML:

 CSS-Tricks 

Følgende CSS ville ikke ha noen effekt:

div:link ( color: aquamarine; )

Igjen, HTML mislykkes validering, siden hrefdet ikke er et gyldig attributt for .

På grunn av det faktum at det bare :linkkan målrette mot elementer, kan :linkstiler defineres i CSS uten elementtypevelgeren, slik:

:link ( color: aquamarine; )

Også for alle praktiske formål når du bruker HTML, er :linkpseudoklassen noe irrelevant, siden den samme effekten kan oppnås ved ganske enkelt å målrette alle elementene direkte:

a ( color: aquamarine; )

Imidlertid, hvis det er noen elementer på siden som ikke har hrefattributtsettet (for eksempel på eldre sider som ble brukt ), vil ovennevnte kode også være målrettet mot disse elementene, og dette er kanskje ikke det ønskede resultatet.

Det skal også påpekes at, fra og med CSS2, kan andre dokumentspråk (foruten HTML) definere andre elementer, foruten ankre, som kan utformes via :linkpseudoklassen.

Nettleserstøtte

Chrome Safari Firefox Opera DVS Android iOS
Noen Noen Noen Noen Noen Noen Noen