CSS 伪类

CSS 伪类 :link 匹配或表示尚未访问过的元素，即所有 <a> 和 <area> 元素，带有 href 属性，甚至带有空 href 属性。

  • 伪类 :link 和 :visited 指定的所有样式都会被任何后续交互式伪类覆盖，例如 :hover 或 :active。

  • 为了正确设置链接样式，您需要将 :link 规则放在所有其他链接相关规则之前。

  • 您需要遵循 LVHA 规则，即: link、:visited、:hover 和 :active。

  • 伪类 :visited 和 :link 是互斥的。

要选择一个与是否已访问过的元素无关的元素，请使用伪类 :any-link。

:link {
   /* ... */ 
}

CSS :link 示例

这里是 :link 伪类的示例。在这里，我们看到在锚元素上使用 :link 伪类，背景颜色为浅黄色，尚未访问。

<html>
<head>
<style>
   a {
      font-size: 1em;
      padding: 5px;
      display: inline-block;
      margin-right: 10px;
   }

   a:link {
      background-color: lightyellow;
   }
</style>
</head>
<body>
   <h2>:link selector 例子</h2>
   <strong><a href="#">易学教程</a></strong>
   <strong><a href="#">百度</a></strong>
</body>
</html>

这里是 :link 伪类以及 :hover 的示例伪类。将鼠标悬停在锚元素上并观察背景颜色的变化。

<html>
<head>
<style>
   a {
      font-size: 1em;
      padding: 5px;
      display: inline-block;
      margin-right: 10px;
   }

   a:link {
      background-color: lightyellow;
   }

   a:hover {
      background-color: lightsalmon;
      color: green;
   }
</style>
</head>
<body>
   <h2>:link selector 例子</h2>
   <strong><a href="#">易学教程</a></strong>
   <strong><a href="#">百度</a></strong>
</body>
</html>