: ссылка - 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псевдокласса.

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

Хром Сафари Fire Fox Опера IE Android iOS
Любой Любой Любой Любой Любой Любой Любой