: будь-яке посилання - CSS-хитрощі

Anonim

:any-linkПсевдо-клас в CSS забезпечує спосіб вибору елементів , які є джерелом якір гіперпосилання.

Якщо вихідний термін якір втратив вас, що це ім'я фантазії для href атрибута на HTML - елементів , і . (Чому вам потрібно орієнтуватись на CSS або в 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, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

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