:visited
:visited CSS 偽類在使用者訪問過連結後應用。出於隱私原因，可以使用此選擇器修改的樣式非常有限。:visited 偽類僅適用於具有 href 屬性的 <a> 和 <area> 元素。
試一試
p {
font-weight: bold;
}
a:visited {
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-1">Random MDN page</a>
</li>
<li>
<a href="https://example.com/missing-1">Random Example page</a>
</li>
</ul>
由 :visited 和未訪問的 :link 偽類定義的樣式，可以被任何後續具有至少相同特異性的使用者操作偽類（:hover 或 :active）覆蓋。為了正確設定連結樣式，請按照 LVHA-order（:link — :visited — :hover — :active）將 :visited 規則置於 :link 規則之後，但在 :hover 和 :active 規則之前。:visited 偽類和 :link 偽類是互斥的。
隱私限制
出於隱私原因，瀏覽器嚴格限制了你可以使用此偽類應用的樣式，以及它們的使用方式
- 允許的 CSS 屬性有
color、background-color、border-color、border-bottom-color、border-left-color、border-right-color、border-top-color、column-rule-color、outline-color、text-decoration-color和text-emphasis-color。 - 允許的 SVG 屬性有
fill和stroke。 - 允許樣式中的 alpha 分量將被忽略。將改用元素非
:visited狀態的 alpha 分量。在 Firefox 中，當 alpha 分量為0時，:visited中設定的樣式將完全被忽略。 - 儘管這些樣式可以改變終端使用者的顏色外觀，但
window.getComputedStyle方法會“撒謊”，並始終返回非:visited顏色的值。 <link>元素永遠不會被:visited匹配。- 透過 CSS 選擇器匹配元素的 DOM 方法，例如
querySelector()和querySelectorAll()，即使文件中存在已訪問的連結，也始終返回“空”結果。對於上述方法，這將分別是null或一個空的NodeList。
注意： 有關這些限制及其原因的更多資訊，請參閱 隱私與 :visited 選擇器。
語法
css
:visited {
/* ... */
}
示例
原本沒有顏色或透明的屬性不能用 :visited 修改。在可以使用此偽類設定的屬性中，你的瀏覽器可能只為 color 和 column-rule-color 設定了預設值。因此，如果你想修改其他屬性，你需要為它們在 :visited 選擇器之外提供一個基本值。
HTML
html
<a href="#test-visited-link">Have you visited this link yet?</a><br />
<a href="">You've already visited this link.</a>
CSS
css
a {
/* Specify non-transparent defaults to certain properties,
allowing them to be styled with the :visited state */
background-color: white;
border: 1px solid white;
}
a:visited {
background-color: yellow;
border-color: hotpink;
color: hotpink;
}
結果
規範
| 規範 |
|---|
| HTML # selector-visited |
| 選擇器 Level 4 # visited-pseudo |
瀏覽器相容性
載入中…
另見
- 隱私與 :visited 選擇器
- 與連結相關的偽類：
:link、:active、:hover