<h1> 未从其容器继承 font-weight
Ale*_*hen 0 html css inheritance
我在继承方面有问题CSS。我制作了一个div容器，将一个h1元素放入其中：
<body>
<div class="container">
<h1> test </h1>
</div>
</body>
据我所知，h1元素中的所有文本都是粗体，字体粗细为 2em。为了解决这个问题，我CSS在容器上放置了以下属性。
.container{
font-size:5em;
font-weight:normal;
}
h1似乎继承两个属性h1的font-size变化5em预期。但是<h1>的 font-weight 保持粗体，即使它继承font-weight:normal;自其父元素。这是我在屏幕上看到的。
为什么h1的 font-weight 没有更改为font-weight:normal;？我认为这是因为有某些 CSS 属性，例如 font-weight，子元素不会从其父元素继承。
<body>
<div class="container">
<h1> test </h1>
</div>
</body>
.container{
font-size:5em;
font-weight:normal;
}
小智 6
这是一个与级联如何工作、它如何与继承以及用户代理样式表相关的基本问题。其他答案包含正确答案的提示，但可能会令人困惑。
我们将级联定义为根据选择器与该元素匹配的规则，并考虑顺序、特异性和重要性，为每个特定元素的每个单独属性查找值的过程。如果没有规则指定特定属性，则该属性采用默认值。请注意，这个过程并没有包括继承的任何地方。
换句话说，继承不是级联的一部分。当且仅当属性可继承时，才会发生继承，并且级联导致该属性没有任何价值。
CSS 规范指定font-weight和font-size是继承的。这只是意味着对于这些属性没有替代规则的任何元素将导致它们从其父级继承最终的计算值。
但是，在这种情况下，是在用户代理样式表这样的规则h1：
h1 { font-weight: bold; font-size: 2em; }
因此，除非有一个较晚的匹配规则，具有相同或更高特异性的选择器指定这些属性，或任何具有更高特异性的匹配规则，或任何标记属性的匹配规则!important，或通过style属性直接应用属性，那么h1页面上的每个元素都将是粗体，并且是其父元素的两倍，因为在此上下文em中指的是父元素的字体大小。请注意，继承不会以任何方式计算到此计算中，因为没有任何属性值是inherit。并不是继承“尝试”发生，然后以某种方式被用户代理h1规则覆盖；继承从一开始就不会发生。
例如，下面的规则
h1 { font-size: 5em; }
将覆盖用户代理样式表中规则中指定的font-sizeonh1元素，因为此规则在级联中比用户代理样式表中的规则“晚”出现，并且其选择器具有相同的特异性。!important正如一个答案所建议的那样，无需标记此属性声明。
请注意，给出您自己的规则
* { font-size: 5em; }
会不会覆盖font-size上h1在用户代理样式表中指定的元素，由于选择*比选择特异性较低h1，甚至认为这条规则来晚于用户代理样式表中的一个。
到目前为止，font-sizeonh1元素将固定为h1用户代理样式表中指定的大小，或者您自己的规则中指定的大小（如果有），不考虑继承。
鉴于用户代理样式表规则的存在，h1导致h1元素从其父级继承其大小或重量的唯一方法是inherit通过级联在直接匹配的规则中为这些属性指定特殊值有问题的元素。使h1元素具有其他尺寸或重量的唯一方法是在直接匹配相关元素的规则中为那些属性指定其他值。
因此，如果我们希望h1尺寸和重量从其父级继承.container，我们必须通过为这些属性指定inherit直接应用于h1元素的规则值来明确说明：
.container h1 { font-size: inherit; font-weight: inherit; }
如果我们希望这种行为适用于 的所有孩子.container，那么我们也可以写
.container * { font-size: inherit; font-weight: inherit; }
如果我们希望h1元素的字体大小是其父元素的两倍，那么这是默认行为，因为这已经是h1 { font-size: 2em; }用户代理样式表中所说的。请注意，这本身并不是继承；相反，它是解释表单的字体大小值2em或200%根据父项的字体大小的正常行为。所以
.container { font-size: 12px; }
<div class="container"><h1>Heading</h1></div>
将导致24px.
但是，如果我真的，真的想要什么，以迫使向下继承到一个孩子？!important正如另一个答案（错误地）建议的那样，我不能通过在 parent 上标记属性来实现这一点吗？No.!important仅影响级联，因为它适用于确定与选择器匹配的特定元素的属性值。它不会以某种方式神奇地“加强”继承，或覆盖子代的其他设置。
总而言之，在您的特定情况下：
为什么
h1的 font-weight 没有更改为font-weight: normal;？我认为这是因为有某些 CSS 属性，例如font-weight，子元素不会从其父元素继承。
从上面应该可以清楚地看出，font-weightforh1不会更改为font-weight: normal（不继承），因为在用户代理样式表中h1已经font-weight指定了它自己的样式。该font-weight属性确实会继承，但仅在inherit其默认值的意义上，仅在没有其他规则指定font-weight适用时才使用，这里不是这种情况。
如果您希望h1直接从其父级继承，那么正确的规则是
h1 { font-weight: inherit; }
或者，如果您只想要在容器内的行为，那么
.container h1 { font-weight: inherit; }
这可能比
.container h1 { font-weight: normal; }
因为它可以让您将容器的重量更改为您想要的任何重量，同时确保孩子的重量也会随之变化。在大小方面，请注意，这将导致容器大小的两倍，因为用户代理样式表规则h1 { font-size: 2em; }仍然适用。