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

【问题标题】：If the element is defined by its class the font-size works incorrect如果元素由其类定义，则字体大小不正确
【发布时间】：2020-10-02 16:47:21
【问题描述】：

我正在制作一个项目，我必须更改元素的字体大小并且它的工作方式不同。例如，我有一个代码

<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}

现在它确实是 60 像素。谁能解释一下，为什么会这样？为父级（div）设置属性不会为其他子级（h2，span）设置相同的属性吗？

【问题讨论】：

text-area-1是元素的ID，还是CSS类名？如果是ID，应该是#text-area-1；如果是 CSS 类名，则应为 .text-area-1。

【解决方案1】：

为父级（div）设置属性不会为其他子级（h2，span）设置相同的属性吗？

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

HTML 元素是一个用于表达内容的通用内联容器，它本身并不代表任何内容。

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

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

【讨论】：

非常感谢。你有这些棘手元素的元素列表吗，比如 h2？
@NotoriousZet 我很高兴能帮上忙！可以在此处找到默认浏览器样式的完整列表：w3schools.com/cssref/css_default_values.asp 如果向下滚动到h2，您将看到为其定义的属性列表，包括font-size。但是对于span，它只是说“无”。
@Run_Script 是正确的，但是父级的样式仍然会影响 h2 的样式，就像在这种情况下一样。 h2 元素的默认字体大小为 1.5em（在 macbook 上的 chrome 中），因此如果您将 parent 的 font-size 设置为 60px，h2 的字体将变为 90px (60 x 1.5)。跨度>