Hướng dẫn css a:visited same color - css a: đã thăm cùng màu

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng

Bộ chọn :visited được sử dụng để chọn các liên kết đã truy cập.

Mẹo: Sử dụng Trình chọn: Link Selpector với các liên kết kiểu đến các trang không được biết đến,: Trình chọn Hover để liên kết kiểu khi bạn chuột qua chúng và: Trình chọn hoạt động để liên kết kiểu khi bạn nhấp vào chúng. Use the :link selector to style links to unvisited pages, the :hover selector to style links when you mouse over them, and the :active selector to style links when you click on them.

Trình duyệt giới hạn các kiểu có thể được đặt cho: các liên kết được truy cập, do các vấn đề bảo mật.

Phong cách được phép là:

• màu sắc
• background-color
• Màu sắc biên giới (và màu biên giới cho các mặt riêng biệt)
• Phác thảo màu
• column-rule-color
• các phần màu của điền và đột quỵ

Tất cả các phong cách khác được kế thừa từ A: liên kết.

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn bộ chọn.

CSS Cú pháp

: Đã truy cập {& nbsp; khai báo CSS;}
  css declarations;
}

Nhiều ví dụ hơn

Thí dụ

Chọn và tạo kiểu không được kiểm soát, truy cập, di chuột và liên kết hoạt động:

/ * Liên kết không được biết đến */a: link & nbsp; {& nbsp; màu xanh lá cây;}
a:link {
  color: green;
}

/ * Liên kết đã truy cập */ a: Đã truy cập {& nbsp; màu xanh lá cây;}
a:visited {
  color: green;
}

/ * Chuột qua liên kết */ a: Hover & nbsp; {& nbsp; màu đỏ;}
a:hover {
  color: red;
}

/ * Liên kết đã chọn */ a: Active & nbsp; {& nbsp; màu vàng;}
a:active {
  color: yellow;
}

Hãy tự mình thử »

Thí dụ

Chọn và tạo kiểu không được kiểm soát, truy cập, di chuột và liên kết hoạt động:

/ * Liên kết không được biết đến */a: link & nbsp; {& nbsp; màu xanh lá cây;}
  color: red;
}

/ * Liên kết đã truy cập */ a: Đã truy cập {& nbsp; màu xanh lá cây;}
  font-size: 150%;
}

Hãy tự mình thử »

Liên kết kiểu với các phong cách khác nhau:

a.ex1: di chuột, a.ex1: active {& nbsp; màu đỏ;}

a.ex2: di chuột, a.ex2: active {& nbsp; kích thước phông chữ: 150%;}

Tôi muốn thay đổi màu đã truy cập chỉ cho hai trong số các liên kết trên trang của tôi. Có cách nào để tôi làm điều đó không?

Adam

42.7K16 Huy hiệu vàng104 Huy hiệu bạc143 Huy hiệu đồng16 gold badges104 silver badges143 bronze badges

hỏi ngày 16 tháng 7 năm 2012 lúc 21:54Jul 16, 2012 at 21:54

Blueberryfieldsblueberryfieldsblueberryfields

42.9K27 Huy hiệu vàng87 Huy hiệu bạc167 Huy hiệu đồng27 gold badges87 silver badges167 bronze badges

4

Đặt một lớp chỉ vào các liên kết mà bạn muốn một màu được truy cập khác, ví dụ:

Different

Trong CSS sau đó kiểu loại liên kết đã được truy cập theo bất kỳ cách nào bạn muốn, ví dụ:

.different:visited {color:chartreuse;}

Điều này sử dụng: Visited Pseudo-Class để tạo kiểu chỉ truy cập các liên kết.

Đã trả lời ngày 16 tháng 7 năm 2012 lúc 21:59Jul 16, 2012 at 21:59

Vâng, có một cách để làm điều này. Cung cấp cho hai liên kết đó một lớp CSS đặc biệt, sau đó sử dụng bộ chọn :visited như bình thường. Trong ví dụ này, tôi sẽ gọi nó là .special.

Link one
Link two

Sau đó, trong bảng kiểu của bạn:

a:visited {
    color: purple;
}

a.special:visited {
    color: pink;
}

"Liên kết một" sẽ, khi được truy cập, xuất hiện trong màu tím. Liên kết hai, khi được truy cập, sẽ xuất hiện trong màu hồng.

Đã trả lời ngày 16 tháng 7 năm 2012 lúc 22:02Jul 16, 2012 at 22:02

Edd Morganedd MorganEdd Morgan

2.86316 Huy hiệu bạc22 Huy hiệu đồng16 silver badges22 bronze badges

Nếu bạn không muốn hoặc không thể thêm lớp vào thẻ neo của mình như @Adam đã đề xuất:

a[href='https://www.google.com/']:visited { color:#FF0000; }
a[href='https://www.facebook.com/']:visited { color:#0000FF; }

Đã trả lời ngày 16 tháng 7 năm 2012 lúc 22:06Jul 16, 2012 at 22:06

dev-null-dwellerdev-null-dwellerdev-null-dweller

29.1k3 Huy hiệu vàng63 Huy hiệu bạc85 Huy hiệu Đồng3 gold badges63 silver badges85 bronze badges