: всяка връзка - CSS-трикове

Anonim

В :any-linkпсевдо-класа в CSS предоставя метод за избор на елементи, които са източник на котвата на хипервръзка.

Ако котвата терминът източник сте загубили, това е име на фантазия за href атрибут на HTML елементи , и . (Защо ще трябва да насочвате към или в CSS е извън мен, но хей.) Спецификацията на HTML има много повече информация за това.

Елемент, който приема и съдържа hrefатрибут, е хипервръзка и ще бъде избран с :any-link. Това се превръща в удобен начин за избор на всички базирани на връзки HTML елементи, които иначе може да изглеждат несвързани и без да докосвате маркирането. Може би съществува, защото може би си мислите, че :linkби избрал всички връзки, но пропуска :visited, така че това ги обгръща всички заедно.

Функционално е точно като селектора на атрибути (href).

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

Заслужава да се отбележи, че бихме могли да изберем същите HTML елементи, като използваме :matches()псевдокласа. Например, :matches(:link, :visited)ще избере същите елементи като :any-link.

Друго нещо, което трябва да се отбележи, е, че в момента спецификацията иска алтернативни предложения за имена на този селектор по време на писането. Въпреки че не е ясно дали името ще се промени, :matches()псевдокласът преди е бил наречен, :any()което може да е индикация.

Поддръжка на браузър

В :any-linkпсевдо-елемент се счита за експериментална функция и е част от спецификацията на селектори ниво 4, който в момента е в работно състояние на чернова.

За пълна поддръжка бихте искали да го използвате с префикс:

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

И не забравяйте да не разделяте тези селектори със запетая, за да ги комбинирате, тъй като браузърите хвърлят селектори с части, които не разбират.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.

работен плот

Chrome Firefox IE Ръб, край Сафари
15* 3 * Не 79 6,1 *

Мобилен / таблет

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

Свързани

  • :link
  • :matches()
  • :visited

Повече информация

  • Спецификация на селектори 4-то ниво (Работен проект)
  • Документация на Mozilla