Html 为什么要增加<；的字体大小；span>；与其他人相比不成比例？

我想增加以下文字的字体大小：3em，包括“Some”和“text”。当我应用以下内容时：

*{
字体大小：10px；
}
傅先生{
字号：3em；
}

一些文本

您应该在整个页面中使用一致的字体尺寸。如果您使用的是

px

，请坚持使用

px

。如果您使用的是

em

或

rem

，请坚持使用。现在，您正在显示两个不同的测量值（这很可能是问题所在）：

由于

像素

和

em

显示方式不同，请将其更改为：

* {  font-size: 10em;  }
.foo {  font-size: 3em;  }

---

或者，将其更改为两个字体大小元素都使用

px

。您的选择。

因为

*

选择器也会选择所有内容，包括

span

元素，除非有其他CSS规则覆盖它。因此，

foo

DIV的内容是3em（=3x 10px），而其中的

span

通过该

*

规则重置为10px

如果您为

div

而不是

*

定义10px大小，整个情况看起来就不同了：

div{
字体大小：10px；
}
傅先生{
字号：3em；
}

为div定义的字体大小
一些文本

选择器将匹配所有元素。在此（

*

）选择器上定义的规则优先于在父元素上定义的规则

因此，即使默认情况下继承了

font size

，但

.foo

上的字体大小不会影响子

span

上的字体大小

您可以阅读

*

，这是一种通用选择器，特别是关于何时使用它

默认的

font size

通常是要在

html

元素上定义的内容。这将解决您的问题：

html {  font-size: 10px;  }
.foo {  font-size: 3em;  }

这样，继承自

.foo

的

span

字体大小优先于继承自

html

的

字体大小。
根据上述代码，类为
.foo
的
div
内的文本和
span
内的文本将具有相同的值（3em）和相同的计算值（3乘以10px）

如果您这样做了：

html {  font-size: 10px;  }
.foo {  font-size: 3em;  }
span {  font-size: 3em;  }

Span的值仍然是3em，但计算出的值将是10px*3*3（90px），比
.foo
的字体大小大3倍。这是因为em与父级的
font size
相关。
使用
rem
单位，而不是
em
。与使用
*
选择器设置字体不同，您应该为
正文设置字体。在您的示例中，有些字体比文本小，因此可能涉及更多CSS？根据
*
规则的定义，“某些”文本使用10px。只有直接在
.foo
div上的文本内容才能获得
3em
，因为这是唯一不被
*
中指定的字体大小覆盖的元素。更多细节请参见下面的答案。我不确定我是否正确理解您。如果由*选择器（10px）重置，这是否意味着其中的文本应该小于其余文本（3x10px）？@Kevvv在您定义了
*{font size:10px；}
-是的示例代码中。在@Johannes answer中，他删除了
*
选择器，并在
div
indstead上定义它。实际上，最好在
body
上定义默认值，因为在这种情况下，嵌套在
.foo
@Kevvv Yes中的其他div也会遇到同样的问题-在您问题的示例中，情况与您在注释中所写的完全相同：
span
中的文本是10px，由于
*
应用于它并覆盖
.foo
类选择器的
3em
，因此我对字体大小增加的经验是，中的文本“Some”比设置为3em的“text”大。所以*选择器没有覆盖.foo类。由于继承了与
em
大小相关的嵌套元素，因此最好使用
rem
，它与顶部元素上的字体大小相关，而不是最接近的父元素。在大多数情况下，这是理想的行为（并且不那么令人困惑）。
html {  font-size: 10px;  }
.foo {  font-size: 3em;  }
span {  font-size: 3em;  }