如果元素由其 class 定义，则字体大小不正确

Question

我在做一个项目，我不得不改变一个元素的字体大小，但它的工作方式不同。例如，我有一个代码

<div class="text-area-1">
            <h2>We are <span class="span1">Newbie</span></h2>
</div>

并在 CSS 中设置

text-area-1{
  font-size:60px;}

font-size 感觉不是60px，看起来是80px+大小，但是改写的时候不一样：

h2, span{ font-size: 60px}

现在真的是 60px.Can 有人解释一下，为什么会这样？为父项 (div) 设置属性不会为其他子项 (h2, span) 设置相同的属性吗？

Answer 1

Doesn't setting a property to a parent(div) set the same property for other children(h2, span)?

对于 span，是的。那是因为 span 是一个通用元素。来自 MDN docs 页面上的 span 元素：

The HTML element is a generic inline container for phrasing content, which does not inherently represent anything.

因此，span 没有为其定义特定的字体大小，它会从其父级继承其字体大小。

但是 h2 在浏览器的默认样式 sheet 上定义了一定的字体大小（除了其他一些 SEO 目的之外，这就是标签的全部意义）。当一个元素直接应用样式时，它不再从其父元素继承此属性。

If the element is defined by its class the font-size works incorrect