: sebarang pautan - Trik CSS

Anonim

Kelas :any-linkpseudo dalam CSS menyediakan kaedah untuk memilih elemen yang menjadi sumber utama hyperlink.

Sekiranya istilah sumber jangkar kehilangan anda, itu adalah nama mewah untuk href atribut pada elemen HTML , dan . (Mengapa anda perlu menyasarkan atau dalam CSS adalah di luar saya, tapi hei.) Spesifikasi HTML mempunyai lebih banyak maklumat mengenai perkara itu.

Elemen yang menerima dan mengandungi hrefatribut adalah hyperlink dan akan dipilih dengan :any-link. Ini menjadi cara yang mudah untuk memilih semua elemen HTML berasaskan pautan yang mungkin kelihatan tidak berkaitan dan tanpa menyentuh tanda. Mungkin ada kerana anda mungkin :linkakan memilih semua pautan, tetapi tidak ada :visited, jadi ini menyatukan semuanya.

Secara fungsional, ia seperti pemilih atribut (href).

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

Perlu diingat bahawa kita juga dapat memilih elemen HTML yang sama menggunakan kelas :matches()pseudo. Sebagai contoh, :matches(:link, :visited)akan memilih elemen yang sama seperti :any-link.

Perkara lain yang perlu diperhatikan adalah bahawa spesifikasi ini sedang meminta cadangan nama alternatif untuk pemilih ini pada masa penulisan ini. Walaupun tidak jelas apakah namanya akan berubah, kelas :matches()pseudo sebelumnya dinamakan :any()yang dapat menjadi petunjuk.

Sokongan Penyemak Imbas

The :any-linkpseudo-elemen ini sebagai ciri eksperimen dan merupakan sebahagian daripada spesifikasi Pemilih Aras 4, yang kini bekerja status draf.

Untuk sokongan penuh, anda mahu menggunakannya sebagai awalan:

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

Dan ingat jangan memisahkan pemilih tersebut untuk menggabungkannya, kerana penyemak imbas melemparkan pemilih dengan bahagian yang tidak mereka fahami.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
15 * 3 * Tidak 79 6.1 *

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
88 85 4.4 * 6.0-6.1 *

Berkaitan

  • :link
  • :matches()
  • :visited

Maklumat lanjut

  • Spesifikasi Tahap 4 Pemilih (Draf Kerja)
  • Dokumentasi Mozilla