在前端开发中，为了解决不同浏览器之间的样式兼容性问题，我们通常会使用 CSS Reset。CSS Reset页面中的样式会将所有 HTML 元素的默认样式设为相同的值，这样就能够避免浏览器默认样式带来的问题。使用 CSS Reset能够让我们更好地控制网站的样式，但是它也带来一个问题 —— 如何在 CSS Reset 后重新定义样式？
理解 CSS Reset
CSS Reset 通过重置所有 HTML 元素的默认样式，让我们从空白的状态开始编写样式。CSS Reset 主要有两种实现方式：
全局样式重置
全局样式重置是指通过一个 CSS 文件来重置所有 HTML 元素的样式，例如 Eric Meyer 的 CSS Reset。这种方法虽然能够完整地重置所有 HTML 元素的样式，但是会给我们带来更多的工作量。因为这种方法会将所有 HTML 元素的样式都清空，所以我们必须手动重新定义这些元素的样式。
局部样式重置
局部样式重置是指对某一具体的 HTML 元素或者某一组 HTML 元素进行样式重置。这种方法需要我们根据具体情况来进行分析，然后编写相应的样式代码。这种方法能够减少我们的工作量，但是也需要一定的技巧和经验。
重新定义样式
通常情况下，我们使用 CSS Reset 之后需要重新定义一些 HTML 元素的样式，使其符合我们的设计要求。下面是一些常见的操作技巧。
禁用样式
在 CSS Reset 中，通常会将一些 HTML 元素的样式禁用掉。如果我们想要重新定义这些样式，可以直接通过 CSS 代码来重写样式。例如，如果我们想要重新定义所有链接的颜色，可以通过以下代码实现：
a {
color: blue;
}重设样式
如果我们不想完全禁用某些元素的样式，可以通过 CSS 代码来重新定义它们的样式。例如，我们可以通过以下代码来重新定义段落元素的样式：
p {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.5;
color: #333;
}这样就能够重新定义段落元素的样式，使其符合我们的设计要求。
优先级
在进行样式重定义时，有一点需要注意 —— 优先级。如果我们定义的样式和 CSS Reset 中的样式冲突，浏览器会根据优先级来决定应该使用哪个样式。因此，在重新定义样式时，我们需要注意样式的优先级问题。
使用!important
如果我们希望重新定义样式的优先级更高，可以使用 !important。例如，如果我们想要重新定义链接的字体大小，并让它的样式优先于 CSS Reset 中的样式，可以使用以下代码：
a {
font-size: 18px !important;
}示例代码
下面是一个简单的示例，演示了如何在 CSS Reset 后重新定义一个按钮的样式。
HTML 代码：
<button class="btn-primary">登录</button>
CSS Reset 代码：
button {
margin: 0;
padding: 0;
border: none;
background: none;
}重新定义样式代码：
-- -------------------- ---- ------- ------------ - -------- ------------- -------- ---- ----- -------------- ---- ---------- ----- ------------ ----- ------ ------ ----------------- ----- -
在这个示例中，我们通过 CSS Reset 将按钮的默认样式重置掉了，然后通过重新定义样式来让按钮符合我们的设计要求。
结论
使用 CSS Reset 能够帮助我们解决浏览器兼容性问题，但同时也带来了重新定义样式的问题。重新定义样式需要考虑优先级和其他因素，但是掌握了正确的技巧之后，就能够让我们更好地掌控网站的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efa76a6fbf960197305ad2