被覆盖的 CSS 属性仍然可以用来确定实际值吗？答案

【问题标题】：Overridden CSS property can still be used to determine actual value?被覆盖的 CSS 属性仍然可以用来确定实际值吗？
【发布时间】：2017-11-06 08:18:19
【问题描述】：

在我的浏览器中，没有任何作者或用户样式，h1 font-size 是 32px。我一直在试图弄清楚 h1 font-size 如何使用以下 HTML 和 CSS 生成 24px 的实际值。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Stuff</title>
    <link rel="stylesheet" type="text/css" href="three.css">
</head>
<body>
    <p>My paragraph</p>
    <h1>My H1</h1>
</body>
</html>

CSS：

html {
   font-size: 12px;
}

看起来2em 的用户代理字体大小覆盖了 CSS 中指定的 12px。尽管它在 Chrome 开发工具中显示为删除线（见下文），但似乎也使用了 12px 值，因为 h1 不是默认的 32px。如何覆盖 12px 并仍然使用？

【问题讨论】：

标签： css font-size css-specificity

【解决方案1】：

这称为specifity。选择器h1 比标题标签的html 选择器更具体。它具有更高的优先级，这就是为什么它会覆盖您指定的样式。

为什么要有 24 像素？

font-size:2em 表示在父元素中指定的字体大小的两倍（此处为 12px），因此您将拥有 2*12px = 24px。这就是为什么还要使用您指定的 12px 的原因。

为了在解释中更通用，我们可以说 Xem 表示当前字体大小的 X 倍。当前字体当然取决于您应用的所有样式（这里您只有html 标签中指定的一种）。

您可以阅读更多here

如果您想覆盖样式，您可以简单地指定：

h1 {
  font-size:12px;
}

或像这样使用!important 选择器：

html {
  font-size:12px!important;
}

【讨论】：

这是有道理的。 “两倍于父元素中指定的字体大小” - 像em 和% 这样的相对单位是否总是引用父元素的属性（如果该属性是继承的）？我认为这是我困难的症结所在；我在本文档中找不到它w3.org/wiki/Inheritance_and_cascade。
@flow2k 是的，它总是引用父级。更一般地说，它是当前使用的 font-size，这意味着如果没有指定 font-size 属性，则应用于此元素的字体大小，您也可以在此处阅读更多内容w3schools.com/cssref/css_units.asp
@flow2k 让它变得简单。如果你有很多 CSS，最后 h1 的字体大小应该是 x。因此，如果您为此元素指定 2em，它将是 2*x。
@flow2k 你可以在我发送的链接中看到Relative to the font-size of the element (2em means 2 times the size of the current font)