強制繼承

某些屬性不會自動從元素繼承到其子元素。這是因為通常希望這些屬性對於應用屬性的元素(或元素的選擇)是唯一的。常見的這類屬性有 marginpaddingbackgrounddisplay 等。

但是,無論如何有時候仍需要繼承。為此,我們可以將 inherit 值應用於應該繼承的屬性。inherit 值可以應用於任何 CSS 屬性和任何 HTML 元素。

假設以下樣式表:

#myContainer {
  color: red;
  padding: 5px;
}
#myContainer p {
  padding: inherit;
}

由於 color 屬性的繼承性,這將 color: red 應用於 <h3><p> 元素。但是,<p> 元素也會從其父元素繼承 padding 值,因為這是指定的。

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>