: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.
Lớp giả :link CSS lớp giả đại diện cho một phần tử chưa được truy cập. Nó khớp với mọi phần tử <a> hoặc <area> chưa được truy cập có thuộc tính href.
Try it
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.go-mizu.dev">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.go-mizu.dev/missing-2">Random MDN page</a>
</li>
<li>
<a href="https://example.com/missing-2">Random Example page</a>
</li>
</ul>
Các kiểu được định nghĩa bởi lớp giả :link và :visited có thể bị ghi đè bởi bất kỳ lớp giả hành động người dùng nào tiếp theo (:hover hoặc :active) có độ đặc hiệu ít nhất bằng nhau. Để tạo kiểu liên kết phù hợp, hãy đặt quy tắc :link trước tất cả các quy tắc liên quan đến liên kết khác, theo thứ tự LVHA: :link — :visited — :hover — :active. Lớp giả :visited và lớp giả :link loại trừ lẫn nhau.
Note:
Sử dụng :any-link để chọn một phần tử bất kể nó đã được truy cập hay chưa.
Cú pháp
:link {
/* ... */
}
Ví dụ
Theo mặc định, hầu hết các trình duyệt áp dụng giá trị color đặc biệt cho các liên kết đã truy cập. Do đó, các liên kết trong ví dụ này sẽ có màu chữ đặc biệt chỉ trước khi bạn truy cập chúng. (Sau đó, bạn cần xóa lịch sử trình duyệt để xem chúng lại.) Tuy nhiên, các giá trị background-color có thể vẫn còn, vì hầu hết các trình duyệt không đặt thuộc tính đó cho các liên kết đã truy cập theo mặc định.
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;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| HTML # selector-link |
| Selectors Level 4 # link-pseudo |