Formatierung von a {...} und a:link {...}

[Gunther]

Hallo,

ich will mal versuchen deine Frage zu beantworten und dabei die richtigen Begriffe zu verwenden. Falls das misslingt, wird mich bestimmt jemand korrigieren. ;-)

Ich habe eine Frage zu der Formatierung von Links:

Welcher grundlegende Unterschied besteht zwischen der Formatierung von a {...} und a:link {...} ?

Vorweg: So etwas könnte man auch durch einfaches Ausprobieren selber herausfinden ...! ;-)

Erklärung:
'a' ist ein sog. 'type selector' (Typ-Selektor), d.h. damit werden alle Elemente vom Typ 'a' selektiert.

:link ist genauso wie :visited eine sog. Pseudoklasse.
:link selektiert alle "unbesuchten" Links, wohingegen :visited alle bereits "besuchten" (angeklickten) Links selektiert.

Was ein Link ist, wird durch die jeweils verwendete Sprache des Dokuments bestimmt. Für HTML ist das demnach das 'a' Element mit einem 'href' Attribut. Und hier ist genau der Unterschied zwischen 'a' und 'a:link'. Denn das 'a' Element kann auch ohne das 'href' Attribut vorkommen, und würde dann weder von 'a:link', noch von a:visited' selektiert.

Siehe: http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes

Damit die jeweiligen Pseudoklassen auch "greifen", ist auf die richtige Reihenfolge zu achten, damit eine Regel nicht von einer nchfolgenden permanent "überschrieben" wird.

Die richtige Reihenfolge ist:

  
a:link {color: blue;}  
a:visited {color: purple;}  
a:hover {color: red;}  
a:active {color: yellow;}

Im Englischen leicht(er) zu merken mit:

• Link, Visited, Hover, Active
• L, V, H, A
• LoVe, HAte"

Hierbei fehlt jetzt noch die ':focus' Pseudoklasse, die wichtig ist, wenn ein Benutzer per Tastatur auf der Seite navigiert. Diese gehört an die vorletzte Stelle, also zwischen :hover und :active.

  
a {color: orange;}  
a:link {color: blue;}  
a:visited {color: purple;}  
a:hover {color: red;}  
a:hover {color: green;}  
a:active {color: yellow;}

Gruß Gunther