:link

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die :link CSS Pseudoklasse repräsentiert ein Element, das noch nicht besucht wurde. Sie stimmt mit jedem unbesuchten <a> oder <area> Element überein, das ein href Attribut besitzt.

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 von nachfolgenden Benutzeraktionspseudoklassen (:hover oder :active) überschrieben werden, die mindestens die gleiche Spezifität haben. Um Links angemessen zu gestalten, setzen Sie die :link Regel vor alle anderen linkbezogenen Regeln, gemäß der LVHA-Reihenfolge: :link — :visited — :hover — :active. Die :visited Pseudoklasse und die :link Pseudoklasse schließen sich gegenseitig aus.

Hinweis: Verwenden Sie :any-link, um ein Element auszuwählen, unabhängig davon, ob es besucht wurde oder nicht.

Syntax

css
: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 vor Ihrem Besuch spezielle Schriftfarben haben. (Danach müssen Sie Ihren Browserverlauf löschen, um sie erneut zu sehen.) Die background-color Werte bleiben jedoch wahrscheinlich bestehen, da die meisten Browser diese Eigenschaft standardmäßig nicht auf besuchte Links anwenden.

HTML

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

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

Ergebnis

Spezifikationen

Specification
HTML
# selector-link
Selectors Level 4
# link-pseudo

Browser-Kompatibilität

Siehe auch