: any-link - Thủ thuật CSS

Anonim

Lớp :any-linkgiả trong CSS cung cấp một phương pháp để chọn các phần tử là nguồn neo của một siêu kết nối.

Nếu neo nguồn hạn bị mất bạn, đó là một tên ưa thích cho các href thuộc tính trên phần tử HTML , và . (Tại sao bạn cần nhắm mục tiêu một hoặc trong CSS thì không phải là tôi, nhưng này.) Thông số HTML có rất nhiều thông tin về điều đó.

Phần tử chấp nhận và chứa hrefthuộc tính là một siêu liên kết và sẽ được chọn với :any-link. Điều này trở thành một cách tiện dụng để chọn tất cả các phần tử HTML dựa trên liên kết có thể có vẻ không liên quan và không cần chạm vào đánh dấu. Có lẽ nó tồn tại bởi vì bạn có thể nghĩ rằng :linksẽ chọn tất cả các liên kết, nhưng nó đã bỏ lỡ :visited, vì vậy điều này kết hợp tất cả lại với nhau.

Về mặt chức năng, nó giống như bộ chọn thuộc tính (href).

Howdy!
:any-link ( color: red; font-weight: 900; text-decoration: none; )

Cần lưu ý rằng chúng tôi cũng có thể chọn các phần tử HTML giống nhau bằng cách sử dụng lớp :matches()giả. Ví dụ, :matches(:link, :visited)sẽ chọn các phần tử giống như :any-link.

Một điều khác cần lưu ý là thông số kỹ thuật hiện đang yêu cầu đề xuất tên thay thế cho bộ chọn này tại thời điểm viết bài này. Mặc dù không rõ liệu tên có thay đổi hay không, nhưng :matches()lớp giả được đặt tên trước đây :any()có thể là một dấu hiệu.

Hỗ trợ trình duyệt

Phần :any-linktử giả được coi là một tính năng thử nghiệm và là một phần của thông số kỹ thuật Cấp 4 của Bộ chọn, hiện đang ở trạng thái nháp.

Để được hỗ trợ đầy đủ, bạn muốn sử dụng nó có tiền tố:

:-webkit-any-link ( ) :-moz-any-link ( ) :any-link ( )

Và hãy nhớ không phân tách các bộ chọn đó bằng dấu phẩy để kết hợp chúng, vì trình duyệt sẽ ném bộ chọn với các phần mà họ không hiểu.

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
15 * 3 * Không 79 6.1 *

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 4,4 * 6,0-6,1 *

Có liên quan

  • :link
  • :matches()
  • :visited

Thêm thông tin

  • Thông số kỹ thuật cấp 4 của bộ chọn (Bản thảo đang làm việc)
  • Tài liệu Mozilla