在进行前端网页设计时，CSS Reset 已经成为了一个非常常见的做法。CSS Reset 是指通过重置浏览器的默认样式，规范化浏览器标签的默认样式，从而解决浏览器之间样式不一致的问题。但是，在进行 CSS Reset 后，链接的默认颜色可能也会被改变。本文将介绍如何将链接字体颜色改变为自己想要的颜色。
为什么需要改变链接字体颜色？
在默认情况下，浏览器会根据不同状态给链接不同的颜色：
- 未访问过的链接：通常为蓝色
- 鼠标放在链接上时的状态：通常为紫色
- 已经访问过的链接：通常为紫色
但是，这些默认的颜色在很多情况下可能并不符合我们网页设计的需求。比如，我们可能需要整个网站都使用一个特定颜色的链接字体，或者需要将某些链接字体设为其他颜色以突出重点。
改变链接字体颜色的两种方式
1. 直接在选择器中设置链接字体颜色
在 CSS Reset 后，可以通过在对应的选择器中设置链接字体颜色的方式，改变链接的字体颜色。假设我们要将所有链接字体的颜色设为红色，就可以这样设置：
a:link,
a:visited,
a:hover,
a:active {
color: red;
}这里，:link 表示未访问过的链接；:visited 表示已经访问过的链接；:hover 表示鼠标放在链接上时的状态；:active 表示链接被点击时的状态。通过在这些伪类选择器中统一设置 color 属性，就能够改变链接的字体颜色了。
2. 使用 CSS 变量设置链接字体颜色
在现代浏览器中，也可以使用 CSS 变量来设置链接字体颜色，这样可以更加灵活。比如，我们可以在根元素（即 html 元素）中定义一个 CSS 变量，然后在链接中使用这个变量，就能够轻松地改变链接字体的颜色了。
下面是使用 CSS 变量设置链接字体颜色的示例代码：
-- -------------------- ---- -------
---- ------- ----
-------
----- -
------------- ----
-
--------
---- ------ ----
-- -------- -------------------- -----------------
-- --------------------这里，我们在根元素中定义了一个名为 --link-color 的 CSS 变量，并将其设为红色。之后，在链接中，我们可以通过 style 属性覆盖 --link-color 的值，来改变链接字体的颜色。第二个链接将使用根元素中定义的默认颜色（即红色）。
总结
在进行 CSS Reset 后，链接字体颜色可能会变为默认颜色，但我们可以通过在选择器中设置颜色或使用 CSS 变量，来改变链接字体颜色。这样，我们就可以灵活地控制链接字体的颜色，以适应不同网站的设计需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645cd212968c7c53b0f5205d