Skip to main content

CSS 属性继承

Docs

Inheritance - CSS: Cascading Style Sheets | MDN (mozilla.org)

继承 - CSS | MDN (mozilla.org)

在 css 中，每个 CSS 属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。

继承属性：当元素的一个继承属性（inherited property）没有指定值时，则取父元素的同属性的计算值 (computed value) 。只有文档根元素取该属性的概述中给定的初始值 (initial value)（这里的意思应该是在该属性本身的定义中的默认值）。

<div class="container">
  <p>Some text</p>
</div>

假设 container 类有一个设置了 color 属性的 CSS 样式：

.container {
  color: green;
}

这意味着，<p> 元素会从 container 类继承 color 属性，因此，<p> 元素上的文本会以 green 颜色显示。

  • CSS 的某些属性具有继承性 (Inherited):

    • 如果一个属性具备继承性，那么在该元素上设置后，它的后代元素都可以继承这个属性;
    • 当然，如果后代元素自己有设置该属性，那么优先使用后代元素自己的属性 (不管继承过来的属性权重多高);

  • 如何知道一个属性是否具有继承性呢？

    • 常见的 font-size/font-family/font-weight/line-height/color/text-align 都具有继承性;
    • 这些不用刻意去记，用的多自然就记住了;

  • 可以强制继承 item : inherit

  • 另外要多学会查阅文档，文档中每个属性都有标明其继承性的：(MDN 文档中的 Formal Definition/规范 标题中的 Inherited 字段)

    mdn-formal_definition

<div class="css-inheritance-demo">
  <div class="container">
    <p class="text">Some text</p>
  </div>
</div>
http://localhost:3000/css-inheritance.html

Some text

tip

继承过来的是计算值（使用父元素计算出的值），而不是设置值（静态设置的值）。

例如：

  • 如果父元素 <div> 的 font-size 是 1.5em，子元素 <p> 的 font-size 是 1.5em。
  • 那么子元素 <p> 的 font-size 就是 36px(16 x 1.5 x 1.5)，而不是 1.5em(16 x 1.5)。