CSS Reset 对 Link 与 Visited 的影响及解决方法

在前端开发中，我们常常使用 CSS Reset 来彻底清除默认样式，以保证页面的跨浏览器和跨设备的一致性。然而，CSS Reset 会对 Link 与 Visited 样式造成一定的影响，本文将深入探讨其原因并提供解决方法。

默认 Link 与 Visited 样式

首先，让我们来看一下默认的 Link 与 Visited 样式是什么。在大多数浏览器中，Link 的默认样式为：

• 蓝色文字；
• 字体为浏览器默认字体；
• 下划线文本装饰。

而 Visited 的默认样式为：

• 紫色文字；
• 字体为浏览器默认字体；
• 去掉下划线。

这些默认样式可以让用户知道哪些链接是未访问过的，哪些链接是已经访问过的。

CSS Reset 的影响

使用 CSS Reset 后，Link 和 Visited 样式将会被重置为和普通文本一样，失去了原本的样式，这会给用户带来一些不便，如：无法分清链接和正常文本，无法知道哪些链接是已经访问过的等等。

CSS Reset 对 Link 和 Visited 样式的影响，不是所有的 Reset 都相同，因为 Reset 中应用了不同的样式规则。比较常见的两种 Reset 方式如下：

Normalize.css

Normalize.css 是最为流行的 Reset 方式之一，它会将所有元素的默认样式置为标准化的版本，以保证不同浏览器之间样式的一致性。Normalize.css 中对 Link 样式的清除规则如下：

a {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
}

而对于 Visited 样式的清除规则如下：

a:visited {
    color: inherit;
}

可以看出，使用 Normalize.css 会将 Link 样式和 Visited 样式都清除掉，并没有提供替代方案。

Eric Meyer Reset

Eric Meyer Reset 是一种比较早期的 Reset 方式，它会清除所有的默认样式，重新定义一些必要的样式，使得页面更一致的被渲染。Eric Meyer Reset 中对于 Link 和 Visited 样式的规则如下：

a:link, a:visited {
    color: #00009E;
    background-color: transparent;
    text-decoration: underline;
}

可以看到，Eric Meyer Reset 会将 Link 和 Visited 样式都重新定义，并且保留下划线，但是颜色可能不是很理想。

解决方案

既然 CSS Reset 会对 Link 和 Visited 样式造成影响，那么我们有没有解决方法呢？

设置常规 Link 样式

我们可以通过在 CSS 文件中设置常规的 Link 样式，让 Link 有自己的样式，使得它和普通文本有所区别。例如：

a {
    color: #007fbb;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

我们可以设置 Link 的颜色和去除下划线，这样 Link 就不会被当作普通文本了。

使用 :not() 选择器

我们可以在 CSS 中使用 :not() 选择器，来单独为 Visited 状态的 Link 设置样式。例如：

a:not(:hover):visited {
    color: #551a8b;
}

这样 Visited 状态的 Link 就可以单独保留颜色了。

避免使用 CSS Reset

最后，我们也可以避免使用 CSS Reset，或者选择一种全面解决问题的 Reset 方式。可以参考一下 Reset.css 和 Normalize.css 的相关文档，根据自己的需要选择一种适合自己的 Reset 方式。

总结

CSS Reset 对 Link 和 Visited 样式会有影响，但我们可以采用一些解决方法来规避这个问题。在设置 Link 样式时，应该让 Link 和普通文本有所区别；在单独设置 Visited 样式时，可以使用 :not() 选择器来限定；另外也可以选择一种适合自己的 Reset 方式来保证样式的一致性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c8e60968c7c53b078fdde