CSS 繼承 (Inheritance)

一、核心概念

CSS 繼承是指某些 CSS 屬性如果被設置在父元素上，其值會自動流向（應用到）其所有后代元素（子、孫元素等）的特性。

核心價值：通過將樣式聲明應用于祖先元素，可以避免在所有后代元素上重復編寫相同的代碼，使得樣式表更簡潔、更高效、更易于維護。

二、可繼承的常見屬性

1. 文本

/* 文本與字體相關 (Text & Font) */
color;                              /* 文本顏色 */
font-family;                        /* 字體系列設置 */
font-size;                          /* 字體大小 */
font-style;                         /* 字體樣式(如斜體) */
font-variant;                       /* 字體變體(如小型大寫字母) */
font-weight;                        /* 字體粗細(如粗體) */
font;                               /* 字體縮寫屬性 */
letter-spacing;                     /* 字符間距 */
line-height;                        /* 行高 */
text-align;                         /* 文本對齊方式 */
text-indent;                        /* 首行縮進 */
text-transform;                     /* 文本轉換(如大寫) */
word-spacing;                       /* 單詞間距 */
text-shadow;                        /* 文本陰影 */
font-size-adjust;                   /* 字體大小調整 */
font-stretch;                       /* 字體拉伸 */
font-kerning;                       /* 字體字距調整 */
text-decoration-color;              /* 文本裝飾顏色 */
text-decoration-line;               /* 文本裝飾線型 */
text-decoration-style;              /* 文本裝飾樣式 */
text-decoration-thickness;          /* 文本裝飾粗細 */
text-emphasis-color;                /* 文本強調顏色 */
text-emphasis-style;                /* 文本強調樣式 */
text-underline-offset;              /* 下劃線偏移 */
text-underline-position;            /* 下劃線位置 */
white-space;                        /* 空白處理方式(如pre) */
hyphens;                            /* 連字符控制 */
line-break;                         /* 換行規則 */
overflow-wrap;                      /* 溢出換行(如break-word) */
quotes;                             /* 引號樣式定義 */
direction;                          /* 文本方向(如rtl) */
unicode-bidi;                       /* Unicode雙向算法設置 */

2. 列表

list-style-type;                    /* 列表標記類型(如disc) */
list-style-position;                /* 列表標記位置(如inside) */
list-style;                         /* 列表樣式縮寫(除image部分外) */

3. 表格

/* 表格相關 (Table) */
border-collapse;                    /* 表格邊框合并方式 */
border-spacing;                     /* 表格邊框間距 */
caption-side;                       /* 表格標題位置 */
empty-cells;                        /* 空單元格顯示方式 */
table-layout;                       /* 表格布局算法 */

4.視覺與交互

/* 視覺與交互 (Visual & Interaction) */
visibility;                         /* 元素可見性 */
cursor;                             /* 鼠標光標樣式 */
caret-color;                        /* 輸入光標顏色 */

5.其他

page;                               /* 分頁媒體設置 */
speak;                              /* 語音合成閱讀方式 */
voice-family;                       /* 語音合成聲音家族 */
volume;                             /* 語音合成音量 */
pitch;                              /* 語音合成音調 */
stress;                             /* 語音合成重音 */
richness;                           /* 語音合成音色豐富度 */
speak-punctuation;                  /* 語音合成標點閱讀方式 */
speak-numeral;                      /* 語音合成數字閱讀方式 */

三、不可繼承的常見屬性

這些屬性通常與盒模型、定位和背景相關。它們只影響元素自身，如果希望后代元素擁有相同樣式，必須顯式聲明。

1. 盒模型屬性（Layout & Box Model）

/* 顯示與定位 (Display & Positioning) */
display;                            /* 顯示類型 */
position;                           /* 定位方式 */
float;                              /* 浮動方向 */
clear;                              /* 清除浮動 */
z-index;                            /* 堆疊順序 */
clip;                               /* 裁剪區域 *//* 尺寸屬性 (Dimensions) */
width;                              /* 元素寬度 */
height;                             /* 元素高度 */
min-width;                          /* 最小寬度 */
min-height;                         /* 最小高度 */
max-width;                          /* 最大寬度 */
max-height;                         /* 最大高度 *//* 外邊距 (Margin) */
margin;                             /* 外邊距縮寫 */
margin-top;                         /* 上外邊距 */
margin-right;                       /* 右外邊距 */
margin-bottom;                      /* 下外邊距 */
margin-left;                        /* 左外邊距 *//* 內邊距 (Padding) */
padding;                            /* 內邊距縮寫 */
padding-top;                        /* 上內邊距 */
padding-right;                      /* 右內邊距 */
padding-bottom;                     /* 下內邊距 */
padding-left;                       /* 左內邊距 *//* 邊框屬性 (Border) */
border;                             /* 邊框縮寫 */
border-top;                         /* 上邊框 */
border-right;                       /* 右邊框 */
border-bottom;                      /* 下邊框 */
border-left;                        /* 左邊框 */
border-width;                       /* 邊框寬度 */
border-style;                       /* 邊框樣式 */
border-color;                       /* 邊框顏色 */
border-radius;                      /* 邊框圓角 *//* 盒模型與溢出 (Box Model & Overflow) */
box-sizing;                         /* 盒模型計算方式 */
overflow;                           /* 溢出處理縮寫 */
overflow-x;                         /* 水平溢出處理 */
overflow-y;                         /* 垂直溢出處理 *//* 彈性布局 (Flexbox) */
flex;                               /* 彈性項目伸縮縮寫 */
flex-grow;                          /* 彈性項目放大比例 */
flex-shrink;                        /* 彈性項目縮小比例 */
flex-basis;                         /* 彈性項目初始大小 */
flex-direction;                     /* 彈性容器主軸方向 */
flex-wrap;                          /* 彈性項目換行 */
justify-content;                    /* 主軸對齊方式 */
align-items;                        /* 交叉軸對齊方式 */
align-content;                      /* 多行對齊方式 */
order;                              /* 彈性項目順序 */
align-self;                         /* 單個項目交叉軸對齊 *//* 網格布局 (Grid Layout) */
grid;                               /* 網格布局縮寫 */
grid-template;                      /* 網格模板縮寫 */
grid-template-columns;              /* 網格列定義 */
grid-template-rows;                 /* 網格行定義 */
grid-auto-columns;                  /* 自動網格列大小 */
grid-auto-rows;                     /* 自動網格行大小 */
grid-auto-flow;                     /* 自動放置算法 */
grid-column;                        /* 網格列位置 */
grid-row;                           /* 網格行位置 */
justify-self;                       /* 單個項目主軸對齊 *//* 間隙屬性 (Gap) */
gap;                                /* 網格間隙縮寫 */
column-gap;                         /* 列間隙 */
row-gap;                            /* 行間隙 */

2. 背景與外觀（Background & Appearance）

/* 背景屬性 (Background) */
background;                         /* 背景縮寫 */
background-color;                   /* 背景顏色 */
background-image;                   /* 背景圖像 */
background-repeat;                  /* 背景重復方式 */
background-position;                /* 背景位置 */
background-size;                    /* 背景尺寸 */
background-attachment;              /* 背景附著方式 */
background-clip;                    /* 背景裁剪區域 */
background-origin;                  /* 背景定位區域 *//* 視覺效果 (Visual Effects) */
box-shadow;                         /* 盒子陰影 */
opacity;                            /* 不透明度 */
filter;                             /* 濾鏡效果 */
backdrop-filter;                    /* 背景濾鏡 *//* 變換效果 (Transforms) */
transform;                          /* 變換效果 */
transform-origin;                   /* 變換原點 *//* 過渡動畫 (Transitions & Animations) */
transition;                         /* 過渡效果縮寫 */
transition-property;                /* 過渡屬性 */
transition-duration;                /* 過渡持續時間 */
transition-timing-function;         /* 過渡時間函數 */
transition-delay;                   /* 過渡延遲時間 */
animation;                          /* 動畫效果縮寫 */
animation-name;                     /* 動畫名稱 */
animation-duration;                 /* 動畫持續時間 */
animation-timing-function;          /* 動畫時間函數 */
animation-delay;                    /* 動畫延遲時間 */
animation-iteration-count;          /* 動畫迭代次數 */
animation-direction;                /* 動畫播放方向 */
animation-fill-mode;                /* 動畫填充模式 */
animation-play-state;               /* 動畫播放狀態 */

3.列表（List）

list-style-image;                   /* 列表標記圖像 */

4.表格（Table）

border-spacing;                     /* 表格邊框間距(部分瀏覽器) */
caption-side;                       /* 表格標題位置(部分瀏覽器) */

5.打印（Print）

page-break-before;                  /* 之前分頁 */
page-break-after;                   /* 之后分頁 */
page-break-inside;                  /* 內部避免分頁 */

6.其他

outline;                            /* 輪廓 */
outline-width;                      /* 輪廓寬度 */
outline-style;                      /* 輪廓樣式 */
outline-color;                      /* 輪廓顏色 */
outline-offset;                     /* 輪廓偏移 */
vertical-align;                     /* 垂直對齊方式 */
visibility;                         /* 可見性(部分情況) */
cursor;                             /* 光標樣式(部分瀏覽器) */
resize;                             /* 尺寸調整 */
appearance;                         /* 原生外觀控制 */

重要提示：background?不繼承是一個常見誤區。父元素設置了背景圖或背景色，子元素默認是透明的（transparent），所以會“透出”父元素的背景，看起來像是繼承了，實則沒有。

四、控制繼承的關鍵字

CSS 提供了四個特殊的關鍵字來顯式地控制繼承行為，它們可以作為任何 CSS 屬性的值。

1.?`inherit`?- 顯式繼承

強制元素獲取其父元素該屬性的計算值。

.parent {border: 2px solid green;padding: 20px;
}.child {border: inherit; /* .child 的邊框會和 .parent 一樣：2px solid green */padding: inherit; /* .child 的內邊距也會變成 20px */
}

使用場景：通常用于強制繼承那些本身不可繼承的屬性（如?border,?padding）。

2.?`initial`?- 重置為初始值

將屬性設置為它的默認初始值（由 CSS 規范定義）。

.parent {color: red;font-weight: bold;
}.child {color: initial; /* 顏色被重置為默認值 (通常是 black) */font-weight: initial; /* 字體粗細被重置為默認值 (normal) */
}

使用場景：撤銷從父元素或用戶代理樣式表繼承來的樣式，將其“恢復出廠設置”。

3.?`unset`?- 智能重置

行為取決于屬性本身：

如果該屬性是可繼承的，其行為等同于?inherit。
如果該屬性是不可繼承的，其行為等同于?initial。

.parent {color: red; /* 可繼承屬性 */border: 2px solid blue; /* 不可繼承屬性 */
}.child {color: unset; /* 等同于 inherit，會變成 red */border: unset; /* 等同于 initial，邊框會消失 (初始值為 none) */
}

使用場景：一個“萬能”重置值，非常實用。

4.?`revert`?- 還原為瀏覽器樣式

將屬性值還原到瀏覽器默認的樣式表（用戶代理樣式表）所設定的值。

h1.child {font-size: revert; /* 會恢復成瀏覽器默認的 2em，而不是繼承父元素的字號 */font-weight: revert; /* 會恢復成瀏覽器默認的 bold */
}

使用場景：撤銷所有作者樣式（你寫的 CSS），回退到瀏覽器的基本樣式。

五、總結與實踐技巧

關鍵字	行為	適用場景
`inherit`	強制從父元素繼承計算值	讓不可繼承的屬性（如邊框）也能繼承
`initial`	將屬性重置為它的默認初始值	清除所有樣式（繼承的和自己設置的），回到初始狀態
`unset`	是繼承屬性則`inherit`，不是則`initial`	智能重置，常用在 CSS Reset 中
`revert`	將屬性還原為瀏覽器默認樣式表的值	撤銷作者樣式，恢復瀏覽器默認樣式

最佳實踐：

1.利用繼承簡化代碼：將字體、顏色等全局樣式定義在?<body>?或一個頂層容器上。

body {font-family: system-ui;line-height: 1.5;color: #333;
}

頁面內大部分文本都會自動應用這些樣式

2.理解不可繼承屬性：不要誤以為背景、邊框等會繼承，給子元素設置背景色時記得覆蓋。

3.善用?inherit：當希望按鈕、卡片等組件內部的文字顏色與組件外部一致時，可以使用?color: inherit;，提高組件的可復用性。

4.使用?unset?進行重置：在創建可復用組件時，可以使用?all: unset;?來移除元素的所有默認樣式，然后從頭開始設計，避免外部樣式的干擾。