理解 CSS 继承的核心概念，即子元素如何自动获取父元素的样式特性
区分“自然继承”的属性（如字体、颜色）与“非自然继承”的属性（如盒模型属性）
掌握如何使用 inherit 关键字强制非继承属性实现继承效果
理解特异性如何中断或覆盖继承链
继承是面向对象编程（OOP）中的一个基本概念，在现实生活中也随处可见（子女继承父母的特征）。在 CSS 中，继承机制同样适用：子元素会自动从其父元素那里继承某些样式属性。
这意味着，如果你为父容器设置了某种样式，其内部的所有子元素默认也会拥有该样式，除非子元素显式地定义了不同的值。
以下示例展示了最基础的继承现象。父元素定义了文字颜色为红色，而子元素并未定义任何颜色规则，但显示时依然呈现红色。
<!DOCTYPE html>
<html>
<head>
<style>
/* 父元素定义颜色为红色 */
#parent-container {
color: red;
}
</style>
</head>
<body>
<div id="parent-container">
父元素 Div
<!-- 子元素未定义颜色，但会继承父元素的红色 -->
<div id="child-div-1">子元素 Div 1</div>
<div id="child-div-2">子元素 Div 2</div>
</div>
</body>
</html>原理解析：
在这个例子中，#parent-container 设置了 color: red。虽然 #child-div-1 和 #child-div-2 没有自己的颜色规则，但它们作为子元素，自然地继承了父元素的 color 属性，因此文字均显示为红色。
继承并不是绝对的。当子元素自己定义了样式规则时，由于特异性的存在，子元素的自定义样式会覆盖从父元素继承来的样式。
让我们看一个多层嵌套的复杂示例：
<!DOCTYPE html>
<html>
<head>
<style>
/* 层级 1: 祖父/父元素，黑色 */
#level-parent {
color: black;
}
/* 层级 2: 子元素，绿色 */
#level-child-1 {
color: green;
}
/* 层级 3: 孙元素，红色 */
#level-grandchild-1 {
color: red;
}
</style>
</head>
<body>
<div id="level-parent">
父元素 (黑色)
<div id="level-child-1">
子元素 1 (绿色 - 覆盖了继承的黑色)
<div id="level-grandchild-1">
孙元素 1 (红色 - 覆盖了继承的绿色)
<div id="level-great-grandchild-1">
曾孙元素 (红色 - 继承了孙元素的红色)
</div>
</div>
<div id="level-grandchild-2">
孙元素 2 (绿色 - 继承了子元素 1 的绿色)
</div>
</div>
<div id="level-child-2">
子元素 2 (黑色 - 继承了父元素的黑色)
</div>
</div>
</body>
</html>逻辑分析：
默认继承：#level-child-2 没有定义颜色，因此它继承了 #level-parent 的黑色。
特异性覆盖：#level-child-1 显式定义了 color: green。尽管它在 #level-parent 内部，但直接定义的规则优先级高于继承，所以它显示绿色。
链式传递：#level-grandchild-1 定义了红色，覆盖了从 #level-child-1 继承的绿色。
深层继承：#level-great-grandchild-1 没有定义颜色，它继承了最近的祖先 #level-grandchild-1 的红色，而不是最初祖先的黑色。
结论：继承是样式的“默认行为”，而显式定义的规则（无论特异性高低，只要选中了该元素）都会打断继承链。
并非所有的 CSS 属性都支持继承。浏览器根据属性的语义来决定是否继承。
通常与文本排版和列表相关的属性会自然继承。这符合直觉：如果一个段落是粗体的，那么段落内的强调文字通常也应该是粗体的。
font-* 系列：font-size, font-family, font-weight, font-style 等
color：文字颜色
list-style-*：列表样式
visibility：可见性
cursor：鼠标指针样式
text-align, line-height 等文本相关属性
通常与布局、盒模型和背景相关的属性不会自然继承。如果这些属性继承了，页面布局将会混乱（例如，如果 border 继承了，每个嵌套的 div 都会有边框，导致视觉上的重复边框）。
盒模型：width, height, margin, padding, border
定位：position, top, left, z-index
背景：background-color, background-image
显示：display, float
使用
inherit关键字
对于非自然继承的属性，如果我们确实希望子元素拥有与父元素相同的值，可以使用 inherit 关键字。这将强制子元素计算并应用父元素的该属性值。
重要限制：inherit 只能让元素继承其直接父元素的计算值。它不能跨越层级去继承祖父元素的值（除非中间层也传递了该值）。
示例：强制继承 Padding
<!DOCTYPE html>
<html>
<head>
<style>
#parent-box {
padding: 30px;
color: red;
border: 1px solid black;
}
#child-box {
/* 强制继承父元素的 padding */
padding: inherit;
/* color 会自然继承，无需写 inherit */
/* border 不会自然继承，如果不写 inherit 或具体值，将为 0 */
border: inherit;
}
</style>
</head>
<body>
<div id="parent-box">
父元素 (内边距 30px)
<div id="child-box">
子元素 (通过 inherit 强制获得 30px 内边距)
</div>
</div>
</body>
</html>效果说明：
padding 默认不继承。但在 #child-box 中设置 padding: inherit 后，它获得了与 #parent-box 相同的 30px 内边距。
如果此时还有一个“孙元素”在 #child-box 内部，且没有设置 padding，它将继承 #child-box 的 30px（因为此时 #child-box 的计算值已经是 30px 了）。但如果 #child-box 没有设置 inherit，其 padding 默认为 0，孙元素继承到的就是 0。
自动继承：文本相关属性（字体、颜色、行高等）默认会从父元素传递给子元素，减少重复代码。
盒模型不继承：布局相关属性（宽高、内外边距、边框、背景）默认不继承，以防止布局错乱。
特异性优先：任何直接在元素上定义的样式规则（即使特异性很低），都会覆盖从父元素继承来的样式。
inherit 关键字：用于强制非继承属性（如 padding, border）采用父元素的计算值。
层级限制：继承是基于“直接父元素”的。如果使用 inherit，获取的是直接父级的值，而非祖先链上任意一级的值。
场景分析：假设你有一个导航栏 <nav>，设置了 font-size: 16px 和 border-bottom: 1px solid #ccc。其内部的链接 <a> 标签文字大小会变成 16px 吗？链接会有下边框吗？如果希望链接也有下边框，应该如何写 CSS？
级联测试：如果在 body 上设置了 color: blue，在 .container 类上设置了 color: inherit，而在具体的 <p> 标签上设置了 color: red。请问 <p> 标签内的文字颜色是什么？.container 内的其他未定义颜色的元素颜色是什么？
深层继承陷阱：如果 GrandParent 设置了 padding: 20px，Parent 没有设置任何 padding 规则，Child 设置了 padding: inherit。请问 Child 的 padding 是多少？为什么？（提示：考虑浏览器的初始值）。