W3docs
ru
Войти

Псевдокласс CSS :link

The :link CSS pseudo-class selects and styles unvisited links. Read more about the pseudo-class and practice with examples.

Псевдокласс :link используется для выбора и стилизации непосещённых ссылок на странице. Он применяется к ссылкам, которые ещё не были посещены.

Псевдоклассы :link и :visited являются взаимоисключающими. Ссылка либо непосещённая (:link), либо посещённая (:visited).

Псевдоклассы :visited, :hover и :active переопределяют стиль, определённый псевдоклассом :link. Для правильной стилизации ссылок правило :link должно располагаться перед всеми остальными правилами, связанными со ссылками (:visited, :hover, :active).

info

Псевдокласс :link соответствует любому непосещённому элементу <a>, <area> или <link>, имеющему атрибут href.

Во многих случаях :link избыточен, поскольку непосещённые ссылки имеют стиль по умолчанию.

Версия

HTML Living Standard

Selectors Level 4

Selectors Level 3

Синтаксис

Синтаксис CSS :link

:link {
  css declarations;
}

Пример кода CSS :link

<!DOCTYPE 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>
Попробуйте сами »

Ещё один пример кода CSS :link

<!DOCTYPE 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>
Попробуйте сами »

В этом примере наведите курсор на ссылки и посмотрите, как они изменятся:

Пример кода CSS :link при наведении

<!DOCTYPE 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>
Попробуйте сами »

Практика

Практика

Какие различные состояния ссылок можно стилизовать в CSS?