Kết hợp: truy cập với: sau hoặc chuỗi giả giả với các phần tử giả

Question

Giả sử tôi muốn thêm hình dạng (như dấu kiểm) bên cạnh liên kết sau khi đã truy cập, thay vì chỉ cần bật màu tím, sử dụng a: after along with a: visited.

tôi không chắc chắn nếu tôi nên chọn hình dạng như thế này:

a:visited:after { 

hay như thế này:

a:visited a:after 

hoặc

a:visited :after { 

(tôi cũng là một chút mờ trên khi tôi nên hoặc không nên thêm một khoảng trống trước một phần tử giả, hay nó thậm chí quan trọng?)

hoặc có thể có điều gì đó khác biệt?

Ngay bây giờ css của tôi trông như thế này:

a:visited:after { 
    /* check mark shape */ 
    content:'\00a0'; 
    color: black; 
    position: relative; 
    left:15px; 
    display:inline-block; 
    width: 3px; 
    height: 6px; 
    border: solid black; 
    border-width: 0 2px 2px 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
} 

kiểm tra mã hình dạng dấu ấn từ http://webitect.net/design/webdesign/creating-fancy-bullet-points-with-pure-css3/

Cảm ơn sự giúp đỡ nào.

Answer 1

Bạn phải sử dụng a:visited:after như bạn hiện đang làm. Nó không hoạt động không phải do lỗi trong mã của bạn, nhưng vì vấn đề nằm trong lớp giả :visited - nó không cho phép sử dụng các phần tử giả vì privacy concerns.

Vì vậy, về cơ bản, bạn sẽ không thể áp dụng biểu tượng dấu kiểm của mình cho các liên kết đã truy cập.

Về vấn đề này:

(tôi cũng là một chút mờ về khi nào tôi nên hay không nên thêm một không gian trước khi một phần tử giả, hoặc dùng nó thậm chí còn quan trọng?)

là điều quan trọng, bởi vì không gian đại diện cho một combinator hậu duệ:

1. Bộ chọn a:visited a:after đại diện cho :after pseudo- phần tử của một số a là hậu duệ của một số khác a là một liên kết đã truy cập, mà trong HTML không hoàn toàn hợp lý.

2. Bộ chọn a:visited :after cũng tương tự như a:visited a:after, ngoại trừ nó đại diện :after của bất kỳ loại hậu duệ của a:visited.

   Nó có thể được viết lại là a:visited *:after. Xem the universal selector trong thông số kỹ thuật.

Bằng cách bỏ qua không gian, bạn đang áp dụng các phần tử giả trực tiếp đến các yếu tố đại diện bởi bộ chọn trước đó, mà trong trường hợp của bạn là a:visited, không phải bất kỳ hậu duệ của nó.