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

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 Dev Tools（见下文）中显示为删除线，但似乎也使用了 12px 值，因为 h1 不是默认的 32px。如何覆盖 12px 并仍然使用？

Answer 1

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

为什么有 24px？

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

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

你可以阅读更多here

如果您想覆盖样式，只需指定即可：

h1 {
  font-size:12px;
}

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

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

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

Overridden CSS property can still be used to determine actual value?

css

font-size

css-specificity

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

Overridden CSS property can still be used to determine actual value?

css

font-size

css-specificity

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