对于前端开发者来说，CSS Reset 是一个非常实用的工具，它可以清除所有浏览器默认样式，使我们可以自定义所有元素的样式，从而创建更具一致性和稳定性的页面。但是，在使用 CSS Reset 时，我们也经常会面临一个问题，那就是它会直接覆盖掉我们当前页面的样式。那么，如何才能既保留原有页面样式，又使用 CSS Reset 呢？
CSS Reset 是什么？
首先，让我们简单了解一下 CSS Reset。CSS Reset 通常是一个 CSS 文件，其中包含了一系列针对所有 HTML 元素的样式覆盖，以达到清空浏览器默认样式的效果。CSS Reset 的作用是，将所有 HTML 元素的样式设置为一致的基础样式，从而使我们可以更好地控制网站的外观和行为。
例如，以下是一些常用的 CSS Reset 样式：
----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ -
如您所见，这些样式会将所有元素的外边距，内边距，边框，文字大小等设置为默认值，同时将垂直对齐方式、背景等参数清空。
保留原有页面样式的方法
使用 CSS Reset 的最大问题在于，它会覆盖掉所有的元素样式，从而让你的页面呈现出完全不同的外观。但是，有几种方法可以解决这个问题，使 CSS Reset 与页面原有样式共存。
1. 将 CSS Reset 放在原有样式之前
通常情况下，浏览器会优先加载样式表的前面位置的样式，因此，我们可以将 CSS Reset 样式表放在原有样式之前，这样就可以确保 Reset 样式不会覆盖原有样式。
例如：
----- ---------------- ----------------- ----- ---------------- -----------------
上述代码会先加载 reset.css，然后加载 style.css，这样就可以确保 Reset 样式不会覆盖原有样式。
2. 给元素添加类名来排除 Reset 样式
CSS Reset 通常会对所有元素都起作用，但是我们也可以选择排除某些元素。例如，我们可以为页面上的某些元素添加一个类名，然后在 CSS Reset 样式表中排除这些类名。
例如，我们要给页面上的某个 div 添加一个类名为 "exclude-reset"，可以这样定义一个排除样式：
---- ---- -------------- - ------- ----- -- ---------- ------ -- -- -
上述样式将排除所有带有 "exclude-reset" 类名的元素的 margin 样式，从而保留它们原有的样式。
3. 使用 Reset 样式表的子集
最后一个解决方法是，您可以定义一个 Reset 样式的子集，只针对您想要覆盖的元素进行样式重置。例如，如果您只需要针对表单元素进行重置，则可以将以下代码添加到您的 Reset 样式表中：
------ --------- ------- ------ - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ -
这样一来，只有表单元素会受到 Reset 样式表的影响，而其他元素将保留其原有样式。
总结
在实际开发中，使用 CSS Reset 可以大大简化 CSS 编写过程，从而提高前端开发效率。但是，在使用 CSS Reset 微调页面样式时，我们也可能会面临无法保留原有页面样式的问题。不过，我们可以通过上述方法，让 Reset 样式与当前页面样式共存。希望这篇文章可以对你们有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6481b16948841e989412e84c