:link CSS-Pseudoklasse
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die :link CSS Pseudoklasse repräsentiert ein Element, das noch nicht besucht wurde. Sie stimmt mit jedem nicht besuchten <a>- oder <area>-Element überein, das ein href-Attribut hat.
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="/proxy/https/developer.mozilla.org/">MDN Web Docs</a>
</li>
<li>
<a href="/proxy/https/www.youtube.com/">YouTube</a>
</li>
</ul>
<p>Pages unlikely to be in your history:</p>
<ul>
<li>
<a href="/proxy/https/developer.mozilla.org/missing-2">Random MDN page</a>
</li>
<li>
<a href="/proxy/https/example.com/missing-2">Random Example page</a>
</li>
</ul>
Durch :link und :visited definierte Styles können von nachfolgenden Benutzeraktionspseudoklassen (:hover oder :active) mit mindestens gleicher Spezifität überschrieben werden. Um Links richtig zu stylen, platzieren Sie die :link-Regel vor allen anderen linkbezogenen Regeln, wie durch die LVHA-Reihenfolge definiert: :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
:link {
/* ... */
}
Beispiele
Standardmäßig wenden die meisten Browser einen speziellen color-Wert auf besuchte Links an. Daher haben die Links in diesem Beispiel wahrscheinlich nur vor dem Besuch spezielle Schriftfarben. (Danach müssen Sie Ihren Browserverlauf löschen, um sie erneut zu sehen.) Die background-color-Werte bleiben jedoch wahrscheinlich erhalten, da die meisten Browser dieses Attribut für besuchte Links standardmäßig nicht festlegen.
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
| Spezifikation |
|---|
| HTML # selector-link |
| Selectors Level 4 # link-pseudo |