: ethvert link - CSS-tricks

Anonim

Den :any-linkpseudo-klasse i CSS tilvejebringer en fremgangsmåde til selektion af elementer, der er kilden anker for et hyperlink.

Hvis udtrykket kildeanker mistede dig, er det et smukt navn for href attributten på HTML-elementerne , og . (Hvorfor du bliver nødt til at målrette mod en eller i CSS er uden for mig, men hej.) HTML-specifikationen har meget mere information om det.

Et element, der accepterer og indeholder en hrefattribut, er et hyperlink og vælges med :any-link. Dette bliver en praktisk måde at vælge alle linkbaserede HTML-elementer på, der ellers måske ser ud til at være uafhængige og uden at røre ved markeringen. Måske eksisterer den, fordi du måske tror :linkville vælge alle links, men den går glip af :visited, så dette pakker dem alle sammen.

Funktionelt er det ligesom attributvælgeren (href).

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

Det er værd at bemærke, at vi også kunne vælge de samme HTML-elementer ved hjælp af :matches()pseudoklassen. :matches(:link, :visited)Vil for eksempel vælge de samme elementer som :any-link.

En anden ting at bemærke er, at specen i øjeblikket beder om alternative navneforslag til denne vælger på tidspunktet for denne skrivning. Mens det er uklart, om navnet vil ændre sig, blev :matches()pseudoklassen tidligere navngivet, :any()hvilket kunne være en indikation.

Browsersupport

Den :any-linkpseudo-elementet betragtes som en eksperimentel funktion og er en del af selektorer Level 4 specifikation, som i øjeblikket er i funktionsdygtig kladdeversion.

For fuld support vil du gerne bruge det præfikset:

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

Og husk ikke at kommaseparere disse vælgere for at kombinere dem, da browsere kaster vælgere med dele, som de ikke forstår.

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
15 * 3 * Ingen 79 6,1 *

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4,4 * 6,0-6,1 *

Relaterede

  • :link
  • :matches()
  • :visited

Mere information

  • Selectors Level 4 Specification (Working Draft)
  • Mozilla-dokumentation