在前端开发过程中，我们经常会使用 CSS Reset 来重置浏览器默认样式，使得不同浏览器的样式一致，减少浏览器兼容性问题。但是 CSS Reset 还存在一些问题，比如会影响链接的样式。本文将介绍如何解决 CSS Reset 对链接样式的影响。
CSS Reset 对链接样式的影响
CSS Reset 通常会将 <a> 标签的样式重置为默认值，这样可能会导致所有链接都没有下划线、没有颜色等。这对于用户来说会带来不便，因为他们不知道哪些文本是链接，哪些不是链接。
例如，以下是一个使用了 CSS Reset 的网页，其中两个链接完全看不到：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<style>
/* CSS Reset */
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* Custom style */
a {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<p>这是一个文本段落，包含了一些<a href="#">链接</a>，并使用了内置的样式。</p>
<p>这是另一个文本段落，包含了一些<a href="#">链接</a>，但是它们看不到。</p>
</body>
</html>解决方法
有两种方法可以解决 CSS Reset 对链接样式的影响：
1. 重新定义链接样式
我们可以在 CSS Reset 之后，重新定义 <a> 标签的样式。例如，我们可以把链接样式设为蓝色和下划线：
// javascriptcn.com 代码示例
/* CSS Reset */
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* Redefine link style */
a {
color: blue;
text-decoration: underline;
}这样，所有链接都会重新应用这个样式，就可以解决 CSS Reset 对链接样式的影响了。
2. 使用 normalize.css
另一种方法是使用 normalize.css，而不是使用 CSS Reset。normalize.css 可以修复浏览器的默认样式，同时也会保持 <a> 标签的样式，避免了 CSS Reset 对链接样式的影响。
以 normalize.css 为例，以下是一个使用 normalize.css 的网页，其中所有链接都显示正常：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/* Custom style */
a {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<p>这是一个文本段落，包含了一些<a href="#">链接</a>，并使用了内置的样式。</p>
<p>这是另一个文本段落，包含了一些<a href="#">链接</a>，并且都正常显示。</p>
</body>
</html>总结
在前端开发过程中，我们需要注意 CSS Reset 对链接样式的影响。为了解决这个问题，我们可以重新定义链接样式，或者使用 normalize.css。以上两种方法都可以确保链接样式正常显示，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653f100f7d4982a6eb891e6e