CSS Reset 当中需要注意的继承和样式覆盖问题

CSS Reset 是一个常用的前端技术，可以使得页面的样式在不同浏览器中表现一致。在使用 CSS Reset 的时候，要注意继承和样式覆盖问题，否则可能会导致样式的不一致或者不如预期。

继承问题

在 CSS Reset 中，我们通常会使用通配符选择器 {} 或者 * {} 来重置默认样式，并将所有元素的样式都归零或者重新设置。

例如以下代码，将使得页面中所有元素的 margin 和 padding 都被设置为 0：

* {
    margin: 0;
    padding: 0;
}

然而，这样的重置样式有可能会让不想被设置的元素继承了这个样式。例如以下代码：

<div>
    <p>Hello World!</p>
</div>

我们在给 div 标签重置样式的时候，往往也会把内嵌的 p 标签的样式也清空，这并不是我们想要的效果。此时就需要针对不同的元素设置不同的重置样式。

例如以下代码，我们只对 body 和 h1 元素进行了样式重置：

// javascriptcn.com 代码示例
body {
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 0.5em;
}

这样就可以保证其他元素不被意外地重置样式。

样式覆盖问题

在使用 CSS Reset 的时候，要注意对于某些特殊的样式，我们可能需要对其进行覆盖，以达到更好的设计效果。

例如以下代码，我们使用了一个针对链接元素的 CSS Reset：

a {
    color: inherit;
    text-decoration: inherit;
}

这个 Reset 可以防止链接出现下划线和不受控制的颜色。但是有时候我们需要更好的设计效果，例如将链接的颜色设置为蓝色，悬浮时有下划线。

此时，我们可以针对具体的元素对它的样式进行重新设置，例如：

a {
    color: blue;
}

a:hover {
    text-decoration: underline;
}

这样可以保证我们保持 CSS Reset 的同时，又可以满足设计要求。

总结

使用 CSS Reset 可以帮助我们在不同浏览器中保持统一的样式表现，但是在使用的时候，要注意继承和样式覆盖问题。根据实际需求，进行有针对性的样式重置和重新设置，才能达到更好的样式效果。

示例代码

// javascriptcn.com 代码示例
/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* body and h1 */
body {
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 0.5em;
}

/* links */
a {
    color: inherit;
    text-decoration: inherit;
}

a:hover {
    text-decoration: underline;
    color: blue;
}

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653273207d4982a6eb5317bc