CSS :link伪类用法详解

:link 伪类历史悠久，但如今开发实际项目的时候，很少使用这个伪类，为什么呢？这里带大家深入 :link 伪类的细节，就知道原因了。

:link 伪类用来匹配页面上 href 链接没有访问过的 <a> 元素。例如，我们可以用 :link 伪类来定义链接的默认颜色为天蓝色：

a:link {
   color: skyblue;
}

乍一看这个定义没什么问题，但实际上有纰漏，那就是如果链接已经被访问过，那么 <a> 元素的文字颜色又该是什么呢？结果是系统默认的链接颜色。这就意味着，使用 :link 伪类必须指定已访问的链接的颜色，通常使用 :visited 伪类进行设置，例如：

a:visited { color: lightskyblue; }

也可以直接使用 a 标签选择器，但不推荐这么用，因为不符合语义：

a { color: lightskyblue; }

并且链接通常会设置 :hover 伪类，使得鼠标光标经过的时候变色，这就出现了优先级的问题。大家都是伪类，平起平坐，如果把表示默认状态的伪类放在最后，必然会导致其他状态的样式无法生效，因此，:link 伪类一定要放在最前。

这里不得不提一下著名的“love-hate顺序”，即 :link -> :visited -> :hover -> :active，其首字母连起来是 LVHA，即 love-hate 的缩写，很好记忆。

如果记不住也没关系，还有其他方法可以不需要记忆这几个伪类的顺序。HTML 中有 3 种链接元素，分别是 <a>、<link> 和 <area>，可以原生支持 href 属性，但 :link 伪类只能匹配 <a> 元素，因此，实际开发中可以直接写作：

:link { color: skyblue; }

这样，就算 :link 伪类放在最后，也不用担心优先级的问题：

a:visited { color: lightskyblue; }
a:hover { color: deepskyblue; }
:link { color: skyblue; }

下面来解释 :link 伪类沉寂的原因，归根结底就是竞争不过 a 标签选择器，例如：

a { color: skyblue; }

CSS 开发人员一看，和使用 :link 伪类效果一样啊，而且比 :link 伪类更好用。

如果网站需要标记已访问的链接，再设置一下 :visited 伪类样式即可，如下：

a { color: skyblue; }
a:visited { color: lightskyblue; }

如果网站不需要标记已访问的链接，则不需要再写任何多余的代码进行处理，这不仅节省了代码，而且更容错，比 :link 伪类好用多了。

于是，久而久之，大家也都约定俗成，使用优先级极低的 a 标签选择器来设置默认链接颜色，如果有其他状态需要处理，再使用伪类。

当然，凡事都有两面性，:link 伪类沦为鸡肋后，大家已经不知道 :link 伪类与 a 标签选择器相比还是有优势的，那就是 :link 伪类可以识别真链接。这是什么意思呢？

例如，一些 HTML：

<a href>链接</a>
<a name="example">非链接</a>

其中 <a name="example"></a> 并不是一个链接元素，因为其中没有 href 属性，点击它将无反应，也无法响应键盘访问。因此，这段 HTML 对应的文字颜色不是链接颜色，而应该是普通的文本颜色。此时 a 标签选择器的问题就出现了，它会让不是链接的 <a> 元素也呈现为链接颜色，而 :link 伪类就不会出现此问题，它只匹配 <a href></a> 这段 HTML 元素。

从这一点来看，:link 伪类更合适，也更规范。例如，要移除 href 属性来表示 <a> 元素按钮的禁用状态，如果使用 :link 伪类，那么按钮的禁用和非禁用的 CSS 就更好控制了。

但是，a:link 带来的混乱要比收益多得多，而且有更易理解的替代方法来区分 <a> 元素的链接性质，那就是直接使用属性选择器代替 a 标签选择器：

[href] { color: skyblue; }

要区分 <a> 元素按钮是否禁用可以用下面的方法：

.cs-button:not([href]) { opacity: .6; }

对于 :link 伪类，就让它沉寂下去吧。