什麼是 CSS 屬性繼承？

當你為一個父元素設定某些 CSS 屬性時，這些屬性可能會被它的子元素「繼承」，也就是子元素會自動套用父元素的樣式值，除非子元素有自己的樣式覆蓋。繼承的目的是為了讓樣式在 DOM 樹中自然傳遞，減少手動設定的工作量。

例如，文字相關的屬性（如 color、font-family）通常是可繼承的，而與佈局相關的屬性（如 width、margin）通常不會被繼承。

哪些屬性可以繼承？

CSS 屬性分為可繼承屬性（Inheritable Properties）和不可繼承屬性（Non-inheritable Properties）。以下是一些常見的可繼承屬性和不可繼承屬性的例子：

可繼承屬性

這些屬性通常與文字或內容的呈現有關：

color：文字顏色
font-family：字型
font-size：字型大小
font-weight：字型粗細
line-height：行高
text-align：文字對齊方式
visibility：元素的可見性
list-style：清單樣式
cursor：滑鼠指標樣式

不可繼承屬性

這些屬性通常與元素的外觀或佈局有關：

width：寬度
height：高度
margin：外邊距
padding：內邊距
border：邊框
display：顯示類型（如 block、inline）
position：定位方式
float：浮動

小技巧：如果不確定某個屬性是否可繼承，可以查閱 MDN 或其他 CSS 文件。通常與文字樣式相關的屬性比較容易被繼承。

繼承的工作原理

父元素傳遞屬性：當父元素設定了一個可繼承的屬性（如 color: blue），它的所有子元素（包括嵌套的子元素）都會繼承這個值，除非子元素有自己的樣式覆蓋。
明確指定的優先級：如果子元素有自己的樣式定義，子元素的樣式會覆蓋父元素的繼承值。例如：
```
.parent {
    color: blue;
}
.child {
    color: red; /* 子元素覆蓋父元素的 color */
}
```
使用 inherit 關鍵字：如果你希望某個屬性強制繼承父元素的值，可以使用 inherit 關鍵字。例如：
```
.child {
    color: inherit; /* 強制繼承父元素的 color 值 */
}
```
初始值與繼承值：如果父元素沒有明確設定某個可繼承屬性的值，子元素會使用該屬性的初始值（由瀏覽器預設提供）。例如，font-size 的初始值可能是 16px。

範例：展示繼承的效果

以下是一個簡單的 HTML 和 CSS 範例，展示 CSS 屬性繼承的行為：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>CSS 屬性繼承範例</title>
    <style>
        .parent {
            color: blue; /* 可繼承屬性 */
            font-family: Arial, sans-serif; /* 可繼承屬性 */
            width: 300px; /* 不可繼承屬性 */
            border: 1px solid black; /* 不可繼承屬性 */
        }
        .child {
            /* 沒有設定 color 和 font-family，所以會繼承父元素的設定 */
            /* 沒有設定 width 和 border，所以不會繼承，使用預設值 */
        }
        .child-custom {
            color: red; /* 覆蓋繼承的 color */
            width: inherit; /* 強制繼承父元素的 width */
        }
    </style>
</head>
<body>
    <div class="parent">
        父元素
        <div class="child">子元素（繼承父元素的 color 和 font-family）</div>
        <div class="child-custom">子元素（自訂 color，強制繼承 width）</div>
    </div>
</body>
</html>

說明：

.parent 設定了 color: blue 和 font-family: Arial, sans-serif，這兩個屬性會被 .child 繼承，因此 .child 的文字是藍色，使用 Arial 字型。
.parent 的 width 和 border 是不可繼承屬性，因此 .child 不會繼承這兩個屬性，會使用預設值（例如，width 會是 auto）。
.child-custom 明確設定了 color: red，因此覆蓋了繼承的 color: blue；同時使用 width: inherit 強制繼承父元素的 width: 300px。

如何控制繼承？

有幾個關鍵字可以幫助你控制 CSS 屬性的繼承行為：

inherit：強制元素繼承父元素的屬性值，適用於任何屬性（即使是不可繼承的屬性）。
```
.child {
    border: inherit; /* 強制繼承父元素的 border */
}
```
initial：將屬性還原為瀏覽器的預設值（初始值），忽略父元素的繼承值。
```
.child {
    color: initial; /* 還原為瀏覽器的預設 color，通常是 black */
}
```

unset：如果屬性是可繼承的，則恢復為繼承父元素的值；如果屬性不可繼承，則恢復為初始值。

.child {
    color: unset; /* 恢復為繼承值（如果父元素有設定） */
    width: unset; /* 恢復為初始值（因為 width 不可繼承） */
}

revert（較新特性）：恢復屬性到瀏覽器或使用者樣式表的預設值（考慮使用者自訂的樣式）。
```
.child {
    color: revert; /* 恢復到瀏覽器或使用者樣式表的預設值 */
}
```

常見問題與注意事項

為什麼有些屬性沒有繼承？ 不可繼承的屬性通常與元素的獨立佈局或結構有關。如果這些屬性（如 margin 或 width）自動繼承，可能會導致不必要的佈局混亂。
如何檢查某個屬性是否繼承？ 你可以查閱 MDN Web Docs 或 W3C 的 CSS 規範。例如，MDN 的屬性頁面會明確標示某屬性是否「Inherited」（可繼承）。
如何讓所有屬性都繼承？ 可以使用通用選擇器 * 和 all 屬性：
```
.child {
    all: inherit; /* 強制繼承父元素的所有屬性 */
}
```
但要小心使用，因為這可能導致不預期的樣式變化。
繼承與層疊（Cascade）的關係 繼承是 CSS 層疊機制的一部分。如果子元素有自己的樣式（例如透過選擇器指定），則層疊的優先級會高於繼承。

實作練習：建立一個簡單的繼承範例

以下是一個完整的練習範例，幫助你理解如何應用 CSS 繼承：

目標：

創建一個頁面，包含一個父元素和兩個子元素，其中一個子元素繼承父元素的文字樣式，另一個子元素自訂樣式並強制繼承某些屬性。

步驟：

創建 HTML 結構。
為父元素設定可繼承和不可繼承的屬性。
為子元素設定不同的樣式，觀察繼承效果。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>CSS 繼承練習</title>
    <style>
        .container {
            font-family: 'Noto Sans TC', sans-serif; /* 可繼承 */
            color: darkgreen; /* 可繼承 */
            font-size: 18px; /* 可繼承 */
            padding: 20px; /* 不可繼承 */
            background-color: lightgray; /* 不可繼承 */
        }
        .child1 {
            /* 什麼都不設定，觀察繼承效果 */
        }
        .child2 {
            color: purple; /* 覆蓋繼承的 color */
            background-color: inherit; /* 強制繼承父元素的 background-color */
        }
    </style>
</head>
<body>
    <div class="container">
        父元素：這是一個容器
        <p class="child1">子元素 1：應該繼承父元素的文字樣式</p>
        <p class="child2">子元素 2：自訂顏色並繼承背景色</p>
    </div>
</body>
</html>

預期結果：

child1 的文字會是深綠色，字型是 Noto Sans TC，字型大小是 18px，但不會有 padding 或 background-color。
child2 的文字會是紫色，但背景色會繼承父元素的 lightgray。

總結

CSS 屬性繼承讓子元素可以自動使用父元素的某些樣式，減少重複撰寫 CSS 的需求。
可繼承屬性多與文字相關（如 color、font-family），不可繼承屬性多與佈局相關（如 width、margin）。
使用 inherit、initial、unset 等關鍵字可以靈活控制繼承行為。
透過練習範例，你可以實際觀察繼承的效果，並在開發中善用這一特性來簡化樣式管理。

哪些屬性可以繼承？​

可繼承屬性​

不可繼承屬性​

繼承的工作原理​

範例：展示繼承的效果​

說明：​

如何控制繼承？​

常見問題與注意事項​

實作練習：建立一個簡單的繼承範例​

目標：​

步驟：​

預期結果：​

總結​