Question

我在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，一个子元素不会从它的父元素继承。

.container{
     font-size:5em;
     font-weight:normal;
}

<body>
   <div class="container">
     <h1> test </h1>
   </div>
</body>

Answer 1

这是一个与级联如何工作，如何与继承相关的基本问题，以及用户代理样式表。其他答案包含正确答案的提示，但可能会令人困惑。

我们将级联定义为根据选择器与该元素匹配的规则在每个特定元素上查找每个单独属性的值的过程，同时考虑顺序，特异性和重要性。如果没有规则指定特定属性，则该属性采用默认值。请注意，此过程不包含任何地方的继承。

换句话说，继承不是级联的一部分。当且仅当属性是可继承的时，才会发生继承，和级联不会导致属性值。

CSS规范指定继承font-weight和font-size。这只是意味着对这些属性没有替代规则的任何元素将导致它们从其父级继承最终的计算值。

但在这种情况下，是 h1的用户代理样式表中的这样的规则：

h1 { font-weight: bold; font-size: 2em; }

因此，除非后面的匹配规则具有指定这些属性的相同或更高特异性的选择器，或具有更高特异性的任何匹配规则，或者将属性标记为!important的任何匹配规则，或者通过style属性直接应用属性，然后页面上的每个h1元素都将为粗体，并且是其父级的两倍，因为在此上下文中em指的是父级的字体大小。请注意，继承不会以任何方式计入此计算，因为属性值都不是inherit。这不是继承＆＃34;尝试＆＃34;发生，然后以某种方式被用户代理h1规则覆盖;这是继承从未发生过的。

例如，以下规则

h1 { font-size: 5em; }

将覆盖用户代理样式表中规则中指定的font-size h1元素，因为此规则发生在＆＃34;之后＆＃34;在级联中比来自用户代理样式表的规则，并且其选择器具有相同的特异性。正如一个答案所示，没有必要标记此属性声明!important。

请注意，提供自己的

规则

* { font-size: 5em; }

不会覆盖用户代理样式表中指定的font-size元素，因为选择器h1的特异性低于选择器{{ 1}}，甚至认为此规则晚于用户代理样式表中的规则。

到目前为止，*个h1元素将固定为用户代理样式表中为font-size指定的大小，或者您自己的规则中指定的大小任何，不考虑继承。

鉴于h1存在用户代理样式表规则，导致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>上标记属性来实现这一点，正如另一个答案（错误地）所暗示的那样吗？ No. 24px仅影响级联，因为它适用于确定与选择器匹配的特定元素的属性值。它并没有神奇地加强＆＃34;继承，或覆盖孩子们的其他一些设置。

总结一下，在您的特定情况下：

为什么!important的字体权重不会更改为!important？我认为这是因为某些CSS属性，如h1，子元素不会从其父元素继承。

从上面可以清楚看出，font-weight: normal;的{{1}}不会更改为font-weight（不会继承），因为font-weight有自己的h1在用户代理样式表中指定。 font-weight: normal属性确实继承了，但仅在h1是默认值的意义上，仅在没有其他指定font-weight的规则适用的情况下使用，事实并非如此。

如果您希望font-weight直接从其父级继承，则正确的规则是

inherit

或者如果您只想在容器内部使用该行为，那么

font-weight

这可能比

更好

h1

因为它可以让你将容器的重量改为你想要的任何东西，同时确保孩子的重量也会随之而来。在大小方面，请注意这将导致容器的大小为容器的两倍，因为用户代理样式表规则h1 { font-weight: inherit; }仍然适用。

Answer 2

.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既不继承font-size也不继承font-weight，因为隐式继承仅适用于继承的属性否则。

你看到的是基于5em的2em（如果容器有font-size: 1em;则同样大到10em）。

当您的开发工具向您展示时，font-size和font-weight都会在用户代理样式表中定义其他属性值。

供参考：

Answer 3

有一种叫做用户代理样式表的东西。它就像嵌入浏览器的CSS文件。它包含HTML元素的默认属性。你知道，就像为什么背景是白色的，默认情况下文本是黑色的。

<h1>将继承其父级的font-weight，因为它是一个可继承的属性，但用户代理样式表会覆盖它。

您可以在devtools中看到默认属性。

Answer 4

试试这个

container * {
  font-weight:normal;
  font-size: 5em;
}

<h1>不从其容器继承font-weight

4 个答案: