gpt4 book ai didi

css - 重写的 CSS 属性仍可用于确定实际值吗?

转载 作者:太空宇宙 更新时间:2023-11-03 22:34:31 25 4
gpt4 key购买 nike

在我的浏览器中,没有任何作者或用户样式,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 并仍然使用?

enter image description here

最佳答案

这叫做 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 - 重写的 CSS 属性仍可用于确定实际值吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47132460/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com