Tắt thay đổi màu của thẻ liên kết khi được truy cập

Question 1

Tôi phải vô hiệu hóa sự thay đổi màu sắc của thẻ liên kết khi được truy cập. Tôi đã làm điều này:

a:visited{ color: gray }

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

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

Question 2

Bạn không thể. Bạn chỉ có thể tạo kiểu cho trạng thái đã thăm.

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

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */

Question 3

Nếu bạn chỉ muốn màu neo giữ nguyên như phần tử mẹ của mỏ neo, bạn có thể tận dụng 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 mỗi bộ chọn; chỉ sử dụng danh sách các bộ chọn được phân tách bằng dấu phẩy (thứ tự quan trọng đối với các phần tử giả neo). Ngoài ra, bạn có thể áp dụng các bộ chọn giả cho một lớp nếu bạn muốn vô hiệu hóa có chọn lọc các màu 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ề trạng thái đã thăm, nhưng tôi cho rằng bạn muốn nói đến tất cả các trạng thái. 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 trên tất cả trừ những người đã truy cập.

Question 4

Để :hoverghi đè :visited, và để đảm bảo :visitedgiống với màu ban đầu, :hoverphải đến sau :visited.

Vì vậy, nếu bạn muốn vô hiệu hóa sự thay đổi màu sắc, a:visitedphải đến trước a:hover. Như thế này:

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

Để tắt :visitedthay đổi, bạn sẽ tạo kiểu cho nó bằng lớp không giả:

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

Question 5

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

Question 6

Nếu bạn sử dụng một số bộ xử lý trước như SASS, bạn có thể sử dụng @extendtính năng:

a:visited {
  @extend a;
}

Kết quả là bạn sẽ thấy a:visitedbộ chọn được thêm tự động cho mọi kiểu với abộ chọn, vì vậy hãy cẩn thận với nó, vì bảng kiểu của bạn có thể tăng kích thước lên rất nhiều.

Như một sự thỏa hiệp, bạn chỉ có thể thêm @extend vào những khối mà bạn thực sự cần.

Question 7

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

a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}

Question 8

Tôi nghĩ nếu tôi đặt màu cho a:visitednó thì không tốt: bạn phải biết màu mặc định của thẻ avà mỗi lần đồng bộ hóa nó với a:visited.

Tôi không muốn biết về màu mặc định (nó có thể được đặt trong common.cssứng dụng của bạn hoặc bạn có thể sử dụng kiểu bên ngoài).

Tôi nghĩ đó là giải pháp tốt:

HTML:

<body>
    <a class="absolute">Test of URL</a>
    <a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>

CSS:

.absolute{
    position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
    text-decoration: none;
    color: transparent;
}

Question 9

a {
    color: orange !important;
}

!importantcó tác dụng là không thể ghi đè thuộc tính được đề cập trừ khi một thuộc tính khác !importantđược sử dụng. Nó thường được coi là thực hành xấu để sử dụng !importanttrừ khi thực sự cần thiết; tuy nhiên, tôi không thể nghĩ ra cách nào khác để 'vô hiệu hóa' chỉ :visitedbằng CSS.

Question 10

Sử dụng:

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.