: посилання - CSS-хитрощі

Anonim

:linkСелектор є псевдо-класом , який націлений на все невідвідування якір ( ) елементи на сторінці.

a:link ( color: aquamarine; )

Наведений вище приклад змінить колір усіх невідвіданих посилань на аквамарин.

При використанні в поєднанні з :hoverпсевдокласом, він :linkповинен з’являтися першим, а то взагалі не бути визначеним, щоб :hoverстилі працювали. Це тому, що вони однаково специфічні, тому, якщо вони :linkз’являться після, ці стилі замінять стилі наведення.

:linkПсевдо-клас буде призначатися все елементи , які мають hrefатрибут, навіть якщо hrefмає пусте значення. Тож у цьому сенсі це як селектор атрибутів (href).

Це означає, що наступні три елементи HTML можна стилізувати за допомогою :linkпсевдокласу:

CSS-Tricks CSS-Tricks CSS-Tricks

Третім прикладом у наведеному вище блоці коду буде недійсний HTML.

Є тільки три HTML елементів , які приймають hrefатрибут: , , і . Тільки елемент може бути стилізований через :linkпсевдо-клас.

Крім того, ви не можете додати hrefатрибут до іншого типу елемента та зробити його стильним через :link. Іншими словами, якщо у вас був такий HTML:

 CSS-Tricks 

Наступний CSS не матиме ефекту:

div:link ( color: aquamarine; )

Знову ж таки, HTML hrefне пройшов перевірку, оскільки не є допустимим атрибутом для .

Через те, що :linkможна націлювати лише на елементи, :linkстилі можуть бути визначені в CSS без селектора типу елемента, наприклад:

:link ( color: aquamarine; )

Крім того, для всіх практичних цілей при використанні HTML, :linkпсевдо-клас є дещо неактуальним, оскільки того самого ефекту можна досягти, просто орієнтуючи безпосередньо на всі елементи:

a ( color: aquamarine; )

Однак, якщо на сторінці є якісь елементи, які не мають hrefнабору атрибутів (наприклад, на застарілих сторінках, які використовувались ), наведений вище код також буде націлений на ці елементи, і це може бути не бажаним результатом.

Слід також зазначити, що, починаючи з CSS2, інші мови документів (крім HTML) можуть визначати інші елементи, крім якорів, які можна стилізувати за допомогою :linkпсевдокласу.

Підтримка браузера

Chrome Сафарі Firefox Опера IE Android iOS
Будь-який Будь-який Будь-який Будь-який Будь-який Будь-який Будь-який