什么是 CSS Reset？
在开始讨论如何使用 CSS Reset 技术实现悬停效果前，先简单介绍下 CSS Reset 是什么。
CSS Reset 是一个将所有 HTML 元素的默认样式都清除的 CSS 文件。因为浏览器对于不同的 HTML 元素都设置有默认样式，并且不同浏览器之间这些默认样式是不统一的，所以使用 CSS Reset 技术可以帮助代码更具跨浏览器兼容性。
通常，我们可以使用预定义的 CSS Reset 方案，例如 Eric Meyer 的 Reset CSS 或 Normalize.css 等。这些方案会覆盖浏览器的默认样式，并将所有 HTML 元素的样式都设置为相同的基础样式。
实现悬停效果的需求
在了解了 CSS Reset 后，我们来讨论如何使用它来实现悬停效果。
悬停效果是网页设计中常用的一种效果，它可以让元素在鼠标移入时改变样式。例如，当鼠标悬停在一个链接上时，链接会改变颜色或者下划线。
预设的悬停效果是通过 CSS 的伪类选择器 :hover 实现的。这个选择器可以让我们在特定元素上使用不同的样式来响应用户的鼠标悬停操作。
下面是一个简单的悬停效果示例：
<a href="#" class="link">悬停我看看</a>
-- -------------------- ---- ------- ----- - ------ ----- ---------------- ----- - ----------- - ------ ---- ---------------- ---------- -
这段代码定义了一个蓝色的链接在悬停时变为红色，并带有下划线的样式。
但是有时，当你在未使用 CSS Reset 的情况下实现悬停效果时，可能会遇到浏览器默认样式的影响，而导致悬停效果无法达到你预期的样式。
例如，有些浏览器会在悬停链接时，将其文本变为紫色，而不是我们期望的红色。
使用 CSS Reset 实现悬停效果
这里使用 Normalize.css 作为 CSS Reset 的例子，并以上面的悬停效果为例。
首先，在你的 HTML 文件中引入 Normalize.css 文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"/>
然后，你可以继续使用你自己的 CSS 样式表以及自定义的悬停样式。
<a href="#" class="link">悬停我看看</a>
-- -------------------- ---- ------- ----- - ------ ----- ---------------- ----- - ----------- - ------ ---- ---------------- ---------- -
这时，悬停样式应该已经可以正常工作了，即使你没有进行额外的样式重置，例如针对 a 标签的默认样式。
总结
使用 CSS Reset 技术可以有效提高网页的跨浏览器兼容性，避免浏览器默认样式的影响。本文以悬停效果为例，介绍了如何使用 CSS Reset 技术来实现悬停效果。希望这篇文章对你有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae191c48841e9894a12993