< h1>不是从它的容器继承字体权重 [英] <h1> is not inheriting font-weight from its container
问题描述
我在 CSS 中有继承问题。我做了一个 div 容器放置一个 h1 元素：
< body>
< div class =container>
< h1>测试< / h1>
< / div>
< / body>
根据我的理解， h1 元素是粗体并且具有2em的字体权重。为了抵消这种情况，我在容器上放置了以下 CSS 属性。
.container {
font-size：5em;
font-weight：normal;
}
h1 继承两个属性和 h1 的 font-size 更改为 5em 。但< h1> 的字体重量保持粗体，即使它继承了 font-weight：normal; 其父元素。这是我在我的屏幕上看到的。
为什么 h1 的font-weight不会更改为 font-weight：normal; ？我认为它是因为有一些CSS属性，像font-weight，一个子元素不从其父继承。
.container {font-size：5em; font-weight：normal;}
< body& < div class =container> < h1>测试< / h1> < / div>< / body>
.container {font-size：8px;}
< div class =container>我是8px文字< h1>这是H1在16px font-size（8px * 2em = 16px）< / h1>< / div> div>
h1 既不继承 font-size 或 font-weight ，因为隐式继承仅适用于未定义的继承的属性。
你看到的是基于5em的2em（如果容器具有 font-size：1em; ），则等于10em。
font-size 和 font-weight
作为参考：
- https： //developer.mozilla.org/en-US/docs/Web/CSS/inheritance
- https://www.w3.org/TR/css3-cascade/#inheriting
I have a problem with inheritance in CSS. I made a div container put an h1 element within it as such:
<body>
<div class="container">
<h1> test </h1>
</div>
</body>
From what I understand, all text within the h1 element is bold and has a font-weight of 2em. To counteract this, I placed the following CSS properties on the container.
.container{
font-size:5em;
font-weight:normal;
}
h1 seems to inherit both properties and h1's font-size changes to 5em as expected. But <h1>'s font-weight stays bold, even though it inherited font-weight:normal; from its parent element. Here's what I see on my screen.
Why does the h1's font-weight not change to font-weight:normal;? I'm think its because there are certain CSS properties, like font-weight, that a child element does not inherit from its parent.
.container{
font-size:5em;
font-weight:normal;
}
<body>
<div class="container">
<h1> test </h1>
</div>
</body>
.container {
font-size: 8px;
}
<div class="container">
I'm 8px text
<h1>This is H1 in 16px font-size (8px * 2em = 16px)</h1>
</div>
h1 neither inherits font-size nor font-weight because implicit inheritance only applies to inherited properties not defined otherwise.
What you are seeing is 2em based on 5em (equally large as 10em if container had font-size: 1em;).
Both font-size and font-weight have other property values defined in the user agent stylesheet as your dev tools are showing you.
For reference:
- https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance
- https://www.w3.org/TR/css3-cascade/#inheriting
这篇关于< h1>不是从它的容器继承字体权重的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
