前言
在进行前端开发时，我们经常会使用 CSS Reset 来消除不同浏览器对 HTML 元素默认样式的差异。然而，过度重置会导致我们的样式失效，影响页面的美观和用户体验。本文将介绍如何避免出现过度重置问题，让我们的页面更加美观。
什么是 CSS Reset？
CSS Reset 是一种消除浏览器默认样式的技术，通过在页面中添加一些 CSS 样式，来覆盖浏览器默认样式，从而达到统一样式的目的。常见的 CSS Reset 有 Normalize.css、Reset.css 等。
以 Normalize.css 为例，它会重置 HTML5 元素的默认样式，并提供一套跨浏览器的一致样式。下面是一段 Normalize.css 的代码：
// javascriptcn.com 代码示例
/* Normalize.css */
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}
article,
aside,
footer,
header,
nav,
section {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
...过度重置的问题
虽然 CSS Reset 可以消除浏览器默认样式的差异，但是过度重置会导致我们的样式失效，影响页面的美观和用户体验。比如，我们在使用 Normalize.css 时，可能会遇到以下问题：
- 字体样式失效：Normalize.css 会为所有元素添加字体样式，可能会覆盖我们自定义的字体样式。
- 表单样式失效：Normalize.css 会为所有表单元素添加样式，可能会导致我们自定义的表单样式失效。
- 边框样式失效：Normalize.css 会为所有元素添加边框样式，可能会覆盖我们自定义的边框样式。
- ...
如何避免过度重置？
为了避免过度重置，我们可以采用以下方法：
1. 选择合适的 CSS Reset
在选择 CSS Reset 时，我们应该选择合适的 CSS Reset，根据我们的需求来选择。比如，如果我们只需要消除浏览器默认样式的差异，并不需要重置所有元素的样式，那么可以选择 Normalize.css；如果我们需要重置所有元素的样式，那么可以选择 Reset.css。
2. 自定义 CSS Reset
如果我们选择的 CSS Reset 不符合我们的需求，我们可以自定义 CSS Reset，只重置我们需要重置的样式，不影响我们自定义的样式。比如，我们可以只重置 HTML5 元素的默认样式，不重置其他元素的样式。
// javascriptcn.com 代码示例
/* 自定义 CSS Reset */
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
margin: 0;
font-size: 1.6rem;
line-height: 1.5;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #333;
background-color: #fff;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
margin: 0;
}
...3. 避免全局样式
在编写 CSS 样式时，我们应该尽量避免使用全局样式，比如 *、html、body 等选择器。全局样式会影响所有元素的样式，容易导致样式失效。
4. 使用后代选择器
为了避免全局样式的影响，我们可以使用后代选择器来限定样式的范围。比如，我们可以使用 .container 类来限定样式的范围，不影响其他元素的样式。
// javascriptcn.com 代码示例
/* 使用后代选择器 */
.container {
max-width: 1200px;
margin: 0 auto;
}
.container h1 {
font-size: 2.4rem;
margin-bottom: 1.6rem;
}
.container p {
font-size: 1.6rem;
line-height: 1.5;
margin-bottom: 1.6rem;
}
...总结
CSS Reset 可以消除浏览器默认样式的差异，让我们的页面更加美观。但是过度重置会导致我们的样式失效，影响页面的美观和用户体验。为了避免过度重置，我们应该选择合适的 CSS Reset，自定义 CSS Reset，避免全局样式，使用后代选择器等方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655c82bcd2f5e1655d6ac273