Bộ :visitedchọn lớp giả có thể thay đổi một số kiểu trên phần tử liên kết neo ( ) nếu trình duyệt của người dùng đã truy cập vào liên kết. Nó nhằm giúp người dùng phân biệt sự khác biệt giữa các liên kết mà họ có và chưa truy cập.
a:visited ( color: gray; )Hạn chế và sử dụng
Có một số lo ngại về quyền riêng tư :visited, cụ thể là một trang web độc hại có thể có liên kết đến rất nhiều trang web có :visitedkiểu dáng, sau đó kiểm tra kiểu trực quan của các liên kết bằng JavaScript để báo cáo lại máy chủ mà người dùng đã truy cập. Điều này vi phạm quyền riêng tư của người dùng và có thể tiết lộ thông tin nhận dạng cá nhân.
Do đó, hầu hết các trình duyệt hạn chế những gì có thể thay đổi kiểu trên :visitedcác liên kết và thông tin kiểu nào có thể được báo cáo bằng getComputedStylephương pháp này.
Đây là một giải pháp tốt của tình huống đó.
Đây là những thuộc tính có thể được thay đổi với :visited:
colorbackground-colorborder-color(và các thuộc tính phụ của nó)outline-color- Các phần màu của thuộc tính
fillvàstroke
Bạn chỉ có thể sử dụng :visitedđể thay đổi các thuộc tính đó nếu liên kết đã có chúng ở :linktrạng thái "không được truy cập" hoặc trạng thái. Bạn không thể sử dụng nó để thêm các thuộc tính chưa có trên liên kết. Ví dụ:
Bạn có thể thay đổi background-colorcủa một :visitedliên kết nếu các yếu tố liên kết đã có một màu nền.
Bạn không thể thêm một liên kết background-colorvào một :visitedliên kết nếu nó không có màu nền khi nó là một liên kết “không được truy cập”.
Liên kết các lớp giả theo thứ tự
Cũng hữu ích khi biết rằng hầu hết các lớp giả liên kết nên được khai báo theo một thứ tự cụ thể. Thứ tự là:
- Liên kết
- Đã đến thăm
- Bay lượn
- Hoạt động
Nếu bạn đang bao gồm việc :focustạo kiểu cho liên kết của mình, bạn thường thêm nó vào giữa “di chuột” và “hoạt động”.
Bản giới thiệu
Mở rộng :visited
Mặc dù việc tạo kiểu trực tiếp cho :visitedcác liên kết bị hạn chế, nhưng có rất nhiều cách thông minh để mở rộng các tùy chọn của bạn để tạo kiểu cho các liên kết đã truy cập. Năm 2015, có một mùa bội thu các bài đăng trên blog chia sẻ những ý tưởng mới để tạo kiểu :visitedliên kết:
Revisiting: đã truy cập , từ Joel Califa, cho thấy một ví dụ về việc sử dụng localstorageđể tạo kiểu cho các liên kết trong miền, đã truy cập.
Hacking: được truy cập , từ Una Kravets, nổi bật :visitedbằng cách thêm thẻ “không được giám sát” làm :afternội dung cho các liên kết, sau đó được ẩn với sự hoán đổi màu nền sau khi liên kết được truy cập.
Đẩy giới hạn của: đã truy cập với các chế độ kết hợp CSS , từ Stelian Firez, kết hợp một thủ thuật HTML nhỏ được quy cho DuckDuckGo và background-blend-mode: screen;làm mờ một biểu tượng tùy chỉnh bên cạnh một liên kết đã truy cập.
Tạo kiểu các Liên kết đã truy cập với SVG , từ Dudley Storey. Sử dụng hình ảnh SVG với fillbộ để khớp với màu nền của trang khi liên kết ở :linktrạng thái, sau đó chuyển sang màu khác sau liên kết :visited. Hướng dẫn cũng bao gồm một phương pháp thay thế sử dụng các ký tự Unicode thay vì SVG.
Có liên quan
:link:active:hover:focus
Thêm thông tin
:visitedtrong thông số kỹ thuật W3C:visitedtại MDN
Hỗ trợ trình duyệt
Tất cả các trình duyệt đều hỗ trợ điều này.