: любая ссылка - 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Псевдо-элемент считается экспериментальной функцией и является частью спецификации селекторов Level 4, который в настоящее время находится в разработке проекта статуса.

Для полной поддержки вы можете использовать его с префиксом:

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

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

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Хром Fire Fox 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