Link selector for css

:link

The example above will change the color of all links to aquamarine. When used in combination with the :hover pseudo-class, :link must appear first, or else not be defined at all, in order for the :hover styles to work. This is because they are equally specific, so if :link came after, those styles would override the hover styles. Think LOVE and HATE to get the order right. The :link pseudo-class will target all elements that have an href attribute, even if the href has an empty value. So, in that sense, it is like the attribute selector [href] . Here are some examples to see what will match the :link pseudo-class:

Again, the HTML would fail validation, since href is not a valid attribute for

Also, for all practical purposes when using HTML, the :link pseudo-class is somewhat irrelevant since the same effect can be achieved by simply targeting all elements directly:

Source: caniuse

Источник

СSS Селектор :link

Селектор :link используется для выбора непросмотренных ссылок.

Примечание: Селектор :link не стилизует ссылки, которые вы уже посетили.

Совет: Используйте селектор :visited для стиля ссылок на посещенные страницы, селектор :hover для стиля ссылок при наведении на них курсора мыши, и селектор :active для стилизации ссылок при нажатии на них.

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

CSS Синтаксис

Примеры

Пример

Установить селектор и стиль непросмотренных, посещенных, наведенных и активных ссылок:

/* непросмотренная ссылка */
a:link color: green;
>

/* посещенная ссылка */
a:visited color: green;
>

/* наведите указатель мыши на ссылку */
a:hover color: red;
>

/* выбранная ссылка */
a:active color: yellow;
>

Пример

Установить стиль ссылки с различными стилями:

a.ex1:hover, a.ex1:active <
color: red;
>

a.ex2:hover, a.ex2:active font-size: 150%;
>

Связанные страницы

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

:link

CSS псевдокласс :link позволяет вам выбирать ссылки внутри элементов. Он выберет любую ссылку, которая ещё не была посещена, даже те, которые уже стилизованы, используя селекторы с другими, относящимися к ссылкам, псевдоклассам типа :hover , :active или :visited . Чтобы стилизовать ссылки должным образом, вам нужно вставлять правила :link до других, как определено LVHA-порядком: :link — :visited — :hover — :active . Псевдо-класс :focus обычно размещается прямо перед или сразу после :hover , в зависимости от ожидаемого эффекта.

Примеры

a:link color: slategray;> .external:link background-color: lightblue;> 

Спецификации

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

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 11 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS :link Pseudo Class

The :link pseudo-class is used to select and style unvisited links in a page. It applies to links that have not yet been visited.

An element can be both :visited and :active so as the :link pseudo-class will have an effect.

:active , :hover, or :visited pseudo-classes override the style defined by the :link pseudo-class. For styling links properly, the :link rule should be placed before all other link-related rules (:link, :visited, :hover, :active).

Version

Syntax

Example of the :link selector:

html> html> head> title>Title of the document title> style> a:link < background-color: #ccc; > style> head> body> h2>:link selector example h2> a href="https://www.w3docs.com">w3docs a> a href="https://stackdev.io/">Stackdev a> body> html>

Example of the :link selector with the tag:

html> html> head> title>Title of the document title> style> p < font-size: 20px; > /* unvisited link */ a:link < color: #ccc; > /* visited link */ a:visited < color: #1c87c9; > /* mouse over link */ a:hover < color: #8ebf42; > /* selected link */ a:active < color: #666; > style> head> body> h2>:link selector example h2> p>Visit our a href="https://www.w3docs.com/">website a>. p> body> html>

In this example, mouse over the links and watch how they will be changed:

Example of the :link pseudo-class with :hover and :visited:

html> html> head> title>Title of the document title> style> a < display: block; padding: 5px 0 10px; font-weight: bold; > a.one:link < color: #ccc; > a.one:visited < color: #095484; > a.one:hover < color: #8ebf42; > a.two:link < color: #ccc; > a.two:visited < color: #095484; > a.two:hover < font-size: 150%; > a.three:link < color: #ccc; > a.three:visited < color: #095484; > a.three:hover < background: #8ebf42; > a.four:link < color: #ccc; > a.four:visited < color: #095484; > a.four:hover < font-family: monospace; > a.five:link < color: #095484; text-decoration: none; > a.five:visited < color: #095484; text-decoration: none; > a.five:hover < text-decoration: overline underline; > style> head> body> h2>:link selector example h2> p> a class="one" href="#">This link changes color a> a class="two" href="#">This link changes font-size a> a class="three" href="#">This link changes background-color a> a class="four" href="#">This link changes font-family a> a class="five" href="#">This link changes text-decoration a> p> body> html>

Browser support

Источник