2011-09-03 37 views
60

Tôi phải tắt thay đổi màu của thẻ neo khi được truy cập. Tôi đã làm điều này:Tắt thay đổi màu của thẻ neo khi truy cập

a:visited{ color: gray } 

(Liên kết có màu xám trước khi truy cập). Nhưng đây là một cách mà tôi tuyên bố rõ ràng màu sắc sau khi liên kết được truy cập, đó là một lần nữa thay đổi màu sắc.

Làm cách nào để vô hiệu hóa thay đổi màu của thẻ neo khi được truy cập mà không thực hiện bất kỳ thay đổi màu sắc rõ ràng nào?

Trả lời

60

Bạn không thể, bạn chỉ có thể tạo kiểu cho trạng thái được truy cập.

Đối với những người khác tìm thấy điều này, hãy chắc chắn rằng bạn có chúng theo thứ tự đúng:

a {color:#FF0000;}  /* unvisited link */ 
a:visited {color:#00FF00;} /* visited link */ 
a:hover {color:#FF00FF;} /* mouse over link */ 
a:active {color:#0000FF;} /* selected link */ 
+4

Để thực sự hậu môn về nó, không nên là 'a' là' a: link'? –

+1

Tôi đoán vậy, mặc dù tôi hiếm khi làm điều đó. –

+6

Nó không phải là tiếng lóng: http://en.m.wikipedia.org/wiki/Anal_retentiveness –

0

Xóa bộ chọn hoặc đặt nó thành cùng một màu với văn bản của bạn xuất hiện bình thường.

10

Đối :hover để ghi đè :visited, và để đảm bảo :visited cũng giống như màu sắc ban đầu, :hover phải đến sau :visited.

Vì vậy, nếu bạn muốn tắt thay đổi màu, a:visited phải đến trước a:hover. Như thế này:

a { color: gray; } 
a:visited { color: orange; } 
a:hover { color: red; } 

Để vô hiệu hóa :visited thay đổi mà bạn sẽ phong cách nó với lớp phi giả:

a, a:visited { color: gray; } 
a:hover { color: red; } 
+2

Tôi có nhìn vào điều này sai hoặc bạn đang làm điều trái ngược với những gì được nói trong báo giá? Theo W3Schools nó là 1) 'a: link',' a: visited' 2) 'a: hover' 3)' a: active' –

139

Nếu bạn chỉ muốn màu sắc neo ở lại giống như yếu tố phụ huynh của neo bạn có thể tận kế thừa:

a, a:visited, a:hover, a:active { 
    color: inherit; 
} 

Lưu ý rằng không cần lặp lại quy tắc cho từng bộ chọn; chỉ cần sử dụng danh sách các bộ chọn được phân cách bằng dấu phẩy (các vấn đề thứ tự cho các phần tử giả mạo neo). Ngoài ra, bạn có thể áp dụng các selectors giả đến một lớp học nếu bạn muốn chọn lọc vô hiệu hóa các màu sắc neo đặc biệt:

.special-link, .special-link:visited, .special-link:hover, .special-link:active { 
    color: inherit; 
} 

Câu hỏi của bạn chỉ hỏi về tình trạng truy cập, nhưng tôi cho rằng bạn có nghĩa là tất cả các tiểu bang. Bạn có thể xóa các bộ chọn khác nếu bạn muốn cho phép thay đổi màu sắc trên tất cả nhưng được truy cập.

+0

Điều này làm việc tuyệt vời, cảm ơn!Là một lưu ý cho những người khác, bạn có thể phải thêm! Quan trọng đối với thẻ màu để nó đúng cách tùy thuộc vào những gì khác trong trang web của bạn: màu sắc: thừa kế! – Mmm

+1

Trong Chrome, điều này chỉ đơn giản là hiển thị văn bản liên kết bằng màu đen. – RajV

+0

Có cách nào để có 'a: link' là màu liên kết mặc định (thường là màu xanh dương) * và * có' a: visited' kế thừa từ đó, mà không cần mã hóa "xanh" ở bất kỳ đâu? – rustyx

-3
a:visited { 
    text-decoration: none; 
} 

nhưng nó sẽ chỉ ảnh hưởng đến các liên kết chưa được nhấp vào.

+1

Câu hỏi được hỏi về màu sắc, không phải trang trí văn bản. –

-2

Bạn có thể giải quyết vấn đề này bằng cách gọi a:linka:visited bộ chọn cùng nhau. Và làm theo nó với bộ chọn a:hover.

a:link, a:visited 
{color: gray;} 
a:hover 
{color: skyblue;} 
Các vấn đề liên quan