CSS 选择器 :link

概述

:link 是一个伪类选择器，用于选择文档中尚未被访问的超链接。这个选择器对于设置未点击过的链接样式非常有用。通常，它会与 :visited 一起使用来区分已访问和未访问的链接。

基本用法

你可以将 :link 应用于任何带有 href 属性的 <a> 元素。例如：

a:link {
  color: blue;
  text-decoration: none;
}

上述代码将使所有未访问的链接显示为蓝色，并且没有下划线。

组合其他选择器

:link 可以与其他选择器组合使用，以便更精确地定位特定元素。例如，你可以将 :link 与类选择器、ID 选择器或属性选择器结合使用。

// www.javascriptcn.com code example
a:link.special-link {
  color: red;
  font-weight: bold;
}

#main-content a:link {
  background-color: lightgray;
  padding: 5px;
}

a[href^="https"]:link {
  border-bottom: 1px solid green;
}

上述代码将对具有 .special-link 类的未访问链接应用红色加粗字体，对 id 为 main-content 的容器内的未访问链接添加灰色背景和内边距，以及对以 https 开头的未访问链接添加绿色下划线。

特殊注意事项

• 不可与 :visited 同时应用：:link 和 :visited 不能同时应用于同一个元素，因为它们是互斥的。当用户访问了一个链接后，该链接将从 :link 转换到 :visited。
• 伪类顺序：为了确保浏览器能够正确解析这些选择器，请按照 :link 在前、:visited 在后的顺序定义它们。这是为了满足 CSS 规范中的“链接-已访问”规则。

示例

假设我们有一个简单的 HTML 文档，其中包含一些链接：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>链接示例</title>
<style>
  a:link {
    color: blue;
    text-decoration: none;
  }

  #main-content a:link {
    background-color: lightgray;
    padding: 5px;
  }

  a[href^="https"]:link {
    border-bottom: 1px solid green;
  }
</style>
</head>
<body>
<div id="main-content">
  <p>这是一个<a href="https://example.com">链接</a>。</p>
  <p>这是另一个<a href="http://example.com">链接</a>。</p>
</div>
</body>
</html>

在这个例子中，只有第一个链接（指向 HTTPS 地址）会显示绿色下划线，而第二个链接则会显示浅灰色背景和内边距。

通过以上介绍，希望你能更好地理解并使用 :link 选择器来定制你的网页链接样式。