nicht angemeldet
Moin!
link / visited / hover / active / focus
ist die "natuerliche" Reihenfolge der Benutzung eines Links:
Ein Link kann unbesucht (link) oder besucht (visited) sein. Beide Zustaende koennen "hovered" und schließlich aktiviert werden. Der Link hat danach den Focus.
Das ist eine Eselsbrücke, aber keine gute Begründung.
Wenn ich davon ausgehe, daß CSS eine lange Liste von Formatanweisungen ist, die vom Browser nacheinander zusammengesetzt wird für jedes Element (also erst nacheinander alle externen Dateien, dann interne Definitionen im HEAD, dann noch Definitionen am Element), dann ist für mich unverständlich, wieso plötzlich bei der Definition von Pseudoklassen für Links die Reihenfolge entscheidend sein soll, obwohl doch die einzelnen Zustände ganz wunderbar nebeneinander definiert werden. Kein Zustand hängt vom anderen direkt ab, keine zwei Zustände existieren logisch nebeneinander (ich will ja nicht die Schrift gleichzeitig rot und grün haben, sondern rot als :link und grün als :hover). Warum ist der Browser zu doof, aus meiner Liste die jeweils aktuell erforderliche Definition der Linkpseudoklasse herauszusuchen? Warum muß es sortiert sein?
Wenigstens die CSS2-Spezifikation gibt da Auskunft:
---schnipp---
Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
---schnapp---
Das ist ein technischer und logik-organisatorischer Grund. :hover muß hinter :link und :visited, damit es seine Formatierung "darüber" legen kann. :active muß hinter :hover, damit es seine Formatierung seinerseits über :hover legen kann.
:focus paßt in diese Reihenfolge nicht rein. :focus hat ein Element, wenn es per Tastatursteuerung angewählt wird, aber nicht, wenn es (wie du schreibst) angeklickt wurde. Bzw. dann verliert es den Status meist recht schnell wieder, weil eine neue Seite geladen wird. Ausnahmen wie der IE bestätigen die Regel. :)
Deshalb gibts in dem Dokument vom W3C folgendes Beispiel:
---schnipp---
An example of combining dynamic pseudo-classes:
A:focus { background: yellow }
A:focus:hover { background: white }
The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover.
---schnapp---
http://www.w3.org/TR/REC-CSS2/selector.html#pseudo-elements
- Sven Rautenberg