CSS Reset 后子元素字体继承失败的解决方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，CSS Reset 是一个常见的技术，它可以帮助我们消除浏览器默认样式对网页样式的影响。然而，有时候我们会发现，在使用 CSS Reset 之后，子元素的字体继承却出现了问题。本文将介绍这个问题的原因以及解决方法。

问题描述

假设我们有如下 HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CSS Reset</title>
  </head>
  <body>
    <div class="parent">
      <p>这是一个段落。</p>
    </div>
  </body>
</html>

我们想要设置段落字体的大小为 16px，于是写出如下 CSS 代码：

p {
  font-size: 16px;
}

但是，当我们在页面中使用了 CSS Reset 之后，子元素的字体大小却变成了默认值，而不是我们期望的 16px。这是因为 CSS Reset 会重置所有元素的样式，包括字体大小。

解决方法

为了解决这个问题，我们可以使用如下的 CSS 代码：

.parent {
  font-size: 16px;
}

.parent * {
  font-size: inherit;
}

这段代码的含义是，首先将父元素的字体大小设置为 16px，然后将所有子元素的字体大小设置为继承自父元素的字体大小。这样，我们就可以保证子元素的字体大小正确继承了父元素的字体大小。

示例代码

下面是一个完整的示例代码，包括 CSS Reset 和解决方法：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CSS Reset</title>
    <style>
      /* CSS 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,
      article, aside, canvas, details, embed,
      figure, figcaption, footer, header, hgroup,
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
      }

      /* 解决方法 */
      .parent {
        font-size: 16px;
      }

      .parent * {
        font-size: inherit;
      }

      /* 其他样式 */
      p {
        margin-bottom: 1em;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <p>这是一个段落。</p>
    </div>
  </body>
</html>

总结

在使用 CSS Reset 的时候，我们需要注意子元素的字体继承问题。通过设置父元素的字体大小，并使用 font-size: inherit; 让子元素继承父元素的字体大小，我们就可以解决这个问题。

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