Question

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

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仍然可以使用？

Answer 1

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

为什么要24px？

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

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

您可以阅读更多here

如果要覆盖样式，只需指定：

h1 {
  font-size:12px;
}

或使用!important选择器，如下所示：

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

重写的CSS属性仍可用于确定实际值？

1 个答案: