: liên kết - Thủ thuật CSS

Anonim

Bộ :linkchọn là một lớp giả nhắm mục tiêu tất cả các phần tử anchor ( ) không được duyệt trên một trang.

a:link ( color: aquamarine; )

Ví dụ trên sẽ thay đổi màu của tất cả các liên kết không được kiểm tra đến aquamarine.

Khi được sử dụng kết hợp với lớp :hovergiả, :linkphải xuất hiện đầu tiên, nếu không thì hoàn toàn không được xác định, để các :hoverkiểu hoạt động. Điều này là do chúng đều cụ thể như nhau, vì vậy nếu :linkxuất hiện sau, các kiểu đó sẽ ghi đè các kiểu di chuột.

Lớp :linkgiả sẽ nhắm mục tiêu tất cả các phần tử có hrefthuộc tính, ngay cả khi thuộc tính đó hrefcó giá trị trống. Vì vậy, theo nghĩa đó, nó giống như bộ chọn thuộc tính (href).

Điều này có nghĩa là ba phần tử HTML sau đều có thể được tạo kiểu thông qua lớp :linkgiả:

CSS-Tricks CSS-Tricks CSS-Tricks

Tuy nhiên, ví dụ thứ ba trong khối mã trên sẽ là HTML không hợp lệ.

Chỉ có ba yếu tố HTML mà chấp nhận các hrefthuộc tính: , , và . Chỉ phần tử có thể được tạo kiểu thông qua lớp :linkgiả.

Ngoài ra, bạn không thể thêm hrefthuộc tính vào một loại phần tử khác và làm cho nó có thể tạo kiểu thông qua :link. Nói cách khác, nếu bạn có HTML sau:

 CSS-Tricks 

CSS sau sẽ không có hiệu lực:

div:link ( color: aquamarine; )

Một lần nữa, HTML sẽ không xác thực được, vì hrefkhông phải là một thuộc tính hợp lệ cho .

Do chỉ :linkcó thể nhắm mục tiêu các phần tử, nên các :linkkiểu có thể được xác định trong CSS mà không cần bộ chọn loại phần tử, như sau:

:link ( color: aquamarine; )

Ngoài ra, đối với tất cả các mục đích thực tế khi sử dụng HTML, lớp :linkgiả có phần không liên quan vì hiệu ứng tương tự có thể đạt được bằng cách nhắm mục tiêu trực tiếp tất cả các phần tử:

a ( color: aquamarine; )

Tuy nhiên, nếu có bất kỳ phần tử nào trên trang không có bộ hrefthuộc tính (ví dụ: trên các trang cũ đã được sử dụng ), đoạn mã trên cũng sẽ nhắm mục tiêu các phần tử đó và đây có thể không phải là kết quả mong muốn.

Cũng cần phải chỉ ra rằng, bắt đầu với CSS2, các ngôn ngữ tài liệu khác (ngoài HTML) có thể xác định các phần tử khác, ngoài các neo, có thể được tạo kiểu thông qua lớp :linkgiả.

Hỗ trợ trình duyệt

Trình duyệt Chrome Safari Firefox Opera I E Android iOS
Bất kì Bất kì Bất kì Bất kì Bất kì Bất kì Bất kì