【HTML、CSS教學】13. 繼承

Published in

Li-NInja

2 min readMay 2, 2020

🚩 繼承

在寫 CSS 的時候，可以使用繼承的觀念來少寫重複的程式碼。
了解繼承的觀念，在閱讀別人的程式碼或是 debug 時，也可以較容易找出 css 有無套用的原因。

文字相關的屬性，預設是有繼承的效果，例如：

font-size | color | font-weight | text-align | line-height

預設沒有繼承的屬性，例如：

margin | padding | background-color | height | width

但透過 inherit，可以使子元素繼承父元素的特性，例如：

margin: inherit;

繼承只是一個預設值而已，所以不管父元素權重寫多大，只要子元素有寫同樣的屬性時，自然會蓋過去。例如以下的範例。

儘管在外層的父元素將文字顏色設定為白色，且使用了 !important，
理論上他的優先順序應該會是最大的。
但對於內層的子元素來說，繼承下來的父元素屬性只是預設值，當子元素也有寫相同的屬性時，自然就會依照子元素的屬性設定為主。

💡 繼承的屬性只是預設值。

範例中 box1 示範使用 inherit 來繼承置中的 margin效果。

box2 示範繼承只是預設值的觀念。