:visited

Probieren Sie es aus

p { font-weight: bold; } a:visited { color: forestgreen; text-decoration-color: hotpink; } 

<p>Pages that you might have visited:</p> <ul> <li> <a href="https://developer.mozilla.org">MDN Web Docs</a> </li> <li> <a href="https://www.youtube.com/">YouTube</a> </li> </ul> <p>Pages unlikely to be in your history:</p> <ul> <li> <a href="https://developer.mozilla.org/missing-1">Random MDN page</a> </li> <li> <a href="https://example.com/missing-1">Random Example page</a> </li> </ul> 

Stile, die durch die :visited- und unbesuchte :link-Pseudoklassen definiert sind, können durch jede nachfolgende Benutzeraktions-Pseudoklasse (:hover oder :active), die mindestens gleiche Spezifität haben, überschrieben werden. Um Links entsprechend zu stylen, setzen Sie die :visited-Regel nach der :link-Regel, aber vor den :hover- und :active-Regeln, wie durch die LVHA-Reihenfolge definiert: :link — :visited — :hover — :active. Die :visited-Pseudoklasse und die :link-Pseudoklasse schließen sich gegenseitig aus.

Datenschutzbeschränkungen

Aus Datenschutzgründen begrenzen Browser streng, welche Stile Sie mit dieser Pseudoklasse anwenden können und wie sie verwendet werden können:

• Zulässige CSS-Eigenschaften sind color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color und text-emphasis-color.
• Zulässige SVG-Attribute sind fill und stroke.
• Die Alpha-Komponente der erlaubten Stile wird ignoriert. Die Alpha-Komponente des Zustands des Elements ohne :visited wird stattdessen verwendet. In Firefox wird, wenn die Alpha-Komponente 0 ist, der in :visited gesetzte Stil vollständig ignoriert.
• Obwohl diese Stile das Erscheinungsbild von Farben für den Endbenutzer ändern können, wird die Methode window.getComputedStyle "lügen" und immer den Wert der Nicht-:visited-Farbe zurückgeben.
• Das <link>-Element wird niemals durch :visited übereinstimmend gemacht.
• DOM-Methoden, die Elemente über CSS-Selektoren abgleichen — wie querySelector() und querySelectorAll() — werden immer ein "leeres" Ergebnis zurückgeben, selbst wenn es besuchte Links in einem Dokument gibt. Für die vorgenannten Methoden wird dies null oder eine leere NodeList sein.

Syntax

:visited { /* ... */ } 

Beispiele

Eigenschaften, die sonst keine Farbe haben oder transparent sind, können mit :visited nicht geändert werden. Von den Eigenschaften, die mit dieser Pseudoklasse festgelegt werden können, hat Ihr Browser wahrscheinlich nur für color und column-rule-color einen Standardwert. Wenn Sie also die anderen Eigenschaften ändern möchten, müssen Sie ihnen einen Basiswert außerhalb des :visited-Selektors zuweisen.

HTML

<a href="#test-visited-link">Have you visited this link yet?</a><br /> <a href="">You've already visited this link.</a> 

CSS

a { /* Specify non-transparent defaults to certain properties, allowing them to be styled with the :visited state */ background-color: white; border: 1px solid white; } a:visited { background-color: yellow; border-color: hotpink; color: hotpink; } 

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Datenschutz und der :visited-Selektor
• Link-bezogene Pseudoklassen: :link, :active, :hover