在前端开发中，我们常常使用 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 样式的清除规则如下：
- -
----------------- ------------
------ --------
---------------- -----
-而对于 Visited 样式的清除规则如下：
--------- -
------ --------
-可以看出，使用 Normalize.css 会将 Link 样式和 Visited 样式都清除掉，并没有提供替代方案。
Eric Meyer Reset
Eric Meyer Reset 是一种比较早期的 Reset 方式，它会清除所有的默认样式，重新定义一些必要的样式，使得页面更一致的被渲染。Eric Meyer Reset 中对于 Link 和 Visited 样式的规则如下：
------- --------- -
------ --------
----------------- ------------
---------------- ----------
-可以看到，Eric Meyer Reset 会将 Link 和 Visited 样式都重新定义，并且保留下划线，但是颜色可能不是很理想。
解决方案
既然 CSS Reset 会对 Link 和 Visited 样式造成影响，那么我们有没有解决方法呢？
设置常规 Link 样式
我们可以通过在 CSS 文件中设置常规的 Link 样式，让 Link 有自己的样式，使得它和普通文本有所区别。例如：
- -
------ --------
---------------- -----
-
------- -
---------------- ----------
-我们可以设置 Link 的颜色和去除下划线，这样 Link 就不会被当作普通文本了。
使用 :not() 选择器
我们可以在 CSS 中使用 :not() 选择器，来单独为 Visited 状态的 Link 设置样式。例如：
--------------------- -
------ --------
-这样 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