:link
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die :link CSS Pseudoklasse repräsentiert ein Element, das noch nicht besucht wurde. Sie trifft auf jedes unbesuchte <a> oder <area> Element zu, 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 werden, können durch nachfolgende Benutzeraktions-Pseudoklassen (:hover oder :active) überschrieben werden, die mindestens die gleiche Spezifität haben. Um Links angemessen zu stylen, platzieren Sie die :link-Regel vor allen anderen linkbezogenen Regeln, wie es durch die LVHA-Reihenfolge definiert ist: :link — :visited — :hover — :active. Die :visited-Pseudoklasse und die :link-Pseudoklasse schließen sich gegenseitig aus.
Hinweis:
Verwenden Sie :any-link, um ein Element unabhängig davon auszuwählen, ob es besucht wurde oder nicht.
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 vor Ihrem Besuch spezielle Schriftfarben haben. (Danach müssen Sie Ihren Browser-Verlauf löschen, um sie erneut zu sehen.) Die background-color-Werte bleiben wahrscheinlich bestehen, 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
| Specification |
|---|
| HTML # selector-link |
| Selectors Level 4 # link-pseudo |