試一試
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://mdn.club.tw">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://mdn.club.tw/missing-2">Random MDN page</a>
</li>
<li>
<a href="https://example.com/missing-2">Random Example page</a>
</li>
</ul>
由 :link 和 :visited 偽類定義的樣式可以被任何後續具有至少相同特異性的使用者行為偽類（:hover 或 :active）覆蓋。為了正確地設定連結樣式，請將 :link 規則放在所有其他與連結相關的規則之前，遵循 LVHA 順序：:link — :visited — :hover — :active。:visited 偽類和 :link 偽類是互斥的。
注意： 使用 :any-link 來選擇一個元素，無論它是否已被訪問。
語法
css
:link {
/* ... */
}
示例
預設情況下，大多數瀏覽器會為已訪問的連結應用特殊的 color 值。因此，此示例中的連結可能只在您訪問它們之前具有特殊的字型顏色。（之後，您需要清除瀏覽器歷史記錄才能再次看到它們。）然而，background-color 值可能會保留，因為大多數瀏覽器預設不會為已訪問的連結設定該屬性。
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;
}
結果
規範
| 規範 |
|---|
| HTML # selector-link |
| 選擇器 Level 4 # link-pseudo |
瀏覽器相容性
載入中…