Pseudo-class :visited trong CSS

Pseudo-class (lớp giả) dùng để hiển thị các trạng thái khác nhau của một phần tử hoặc bộ chọn CSS. Pseudo-class :visited hiển thị rằng liên kết đã được truy cập.

Lớp giả này thường liên kết với thẻ <a> (link).

Cú pháp

a:visited { color:green; }

Hãy xem cách sử dụng thực tế của :visited pseudo-class với các tình huống khác nhau:

Ví dụ 1

<html> <head>    <style>       a:visited { color:green; }    </style> </head> <body>    <a href="https://www.tutorialspoint.com">Click here to learn</a> </body> </html>

Giải thích

Khi bạn lần đầu thấy liên kết, nó hiển thị với màu link mặc định (xanh dương) và sẽ chuyển sang xanh lá nếu liên kết đã được truy cập một lần.

Ví dụ 2

<html> <head>    <style>       /* setting default style to make the style visible for :visited state */       a { background-color: white; border:1px solid white; }       a:visited { border:yellow; }    </style> </head> <body>    <a href="https://www.tutorialspoint.com">Click here to learn</a> </body> </html>

Giải thích

Trong ví dụ này, sau khi truy cập link, nó sẽ có viền vàng 1px.

Ví dụ 3

<html> <head>    <style>       /* setting default style to make the style visible for :visited state */       a { background-color: white; }       a:visited { background-color: seagreen; }    </style> </head> <body>    <a href="https://www.tutorialspoint.com">Click here to learn</a> </body> </html>

Giải thích

Khi bạn truy cập link một lần, màu nền sẽ chuyển sang seagreen.

Hạn chế về định dạng

Vì lý do bảo mật và quyền riêng tư, pseudo-class :visited chỉ hoạt động với tập hợp hạn chế các thuộc tính CSS như: color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color và các thuộc tính SVG fill và stroke.

Tương thích trình duyệt