CSS Inheritance (繼承特性)

觀察哪些屬性會如瀑布般流下,哪些屬性需要強制繼承。

1. 操作父元素 (Parent)

設置文字顏色與字體 (Color & Font)

✔️ 這是「預設會繼承」的屬性。觀察裡面的文字是否跟著改變。

設置粗虛線邊框 (Border)

❌ 這是「預設不繼承」的屬性。觀察裡面的盒子是否會出現邊框。

2. 強制繼承 (Force Inheritance)

子盒子:border: inherit
按鈕:font-family: inherit

💡 表單元素(如按鈕)非常頑固,預設不繼承字體,必須用 inherit 強制命令它。

Browser View
<div class="parent">

我是祖父層元素

如果你在這裡設置了顏色,它會像水一樣流向我的子元素。

<div class="child">

我是子層元素

我會自動繼承上面的顏色。但我絕對不會繼承邊框 (Border)、內邊距 (Padding) 和背景色,除非你用 inherit 逼我。

← 注意看我的字體有沒有跟著變!