:link

Probieren Sie es aus

p {
  font-weight: bold;
}

a:link {
  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-2">Random MDN page</a>
  </li>
  <li>
    <a href="https://example.com/missing-2">Random Example page</a>
  </li>
</ul>

Stile, die durch die :link- und :visited-Pseudoklassen definiert sind, können durch jede nachfolgende Benutzeraktions-Pseudoklasse (:hover oder :active), die mindestens gleiche Spezifität hat, überschrieben werden. Um Links angemessen zu stylen, platzieren Sie die :link-Regel vor allen anderen Link-bezogenen Regeln, wie sie durch die LVHA-Reihenfolge definiert ist: :link — :visited — :hover — :active. Die :visited-Pseudoklasse und die :link-Pseudoklasse schließen sich gegenseitig aus.

Syntax

:link {
  /* ... */
}

Beispiele

Standardmäßig wenden die meisten Browser einen speziellen color-Wert auf besuchte Links an. Daher werden die Links in diesem Beispiel wahrscheinlich nur dann spezielle Schriftfarben haben, bevor Sie sie besuchen. (Danach müssen Sie Ihren Browserverlauf löschen, um sie erneut zu sehen.) Die background-color-Werte werden jedoch wahrscheinlich bestehen bleiben, da die meisten Browser diese Eigenschaft standardmäßig nicht auf besuchte Links anwenden.

HTML

<a href="#ordinary-target">This is an ordinary link.</a><br />
<a href="">You've already visited this link.</a><br />
<a>Placeholder link (won't get styled)</a>

CSS

a:link {
  background-color: gold;
  color: green;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Link-bezogene Pseudoklassen: :visited, :hover, :active