CSS 继承指子元素自动沿用父元素的某些 CSS 属性值，无需重复声明，是 CSS 简化样式编写的核心机制之一。
一、哪些属性会继承？（高频实用类）
✅ 文本相关（最常用）：
color、font-size、font-family、font-weight、line-height、text-align、text-indent、letter-spacing✅ 列表相关：list-style-type、list-style-position✅ 字体相关：font-style、font-variant✅ 其他：cursor（光标样式）、visibility（可见性）二、哪些属性不会继承？（易踩坑类）
❌ 布局 / 盒模型：
width、height、margin、padding、border、display、position、top/right/bottom/left❌ 背景相关：background-color、background-image、background-position❌ 定位 / 布局：float、clear、z-index❌ 边框 / 轮廓：border-radius、outline三、关键实用技巧
-
强制继承（inherit 关键字）给子元素设置
属性: inherit;，可让原本不继承的属性 “继承” 父元素值：css.parent {border: 1px solid #333;padding: 20px; } .child {border: inherit; /* 子元素继承父元素的边框样式 */padding: inherit; /* 子元素继承父元素的内边距 */ } -
取消继承（initial/unset 关键字）
initial：恢复属性的默认值（脱离继承）；unset：若属性可继承则恢复继承，不可继承则恢复默认值：
css.parent {color: red;font-size: 16px; } .child {color: initial; /* 文字颜色恢复浏览器默认（黑色） */font-size: unset; /* 字体大小回到继承的16px（因font-size可继承） */ } -
继承的优先级继承的属性优先级极低，子元素自身的样式 > 类 / ID 选择器 > 继承样式：css
.parent { color: blue; } /* 父元素文字蓝色 */ .child { color: red; } /* 子元素自身样式覆盖继承，最终显示红色 */
四、实战避坑点
- 误区：认为
background-color会继承 → 需手动给子元素设置，或用inherit强制继承； - 实用场景：页面全局设置
body { font-family: "微软雅黑", sans-serif; }，所有文本元素自动继承字体，无需重复写； - 注意：继承是 “沿 DOM 树向下传递”，仅子元素继承父元素，兄弟元素之间无继承关系。
五、总结
继承的核心价值是减少重复代码（比如全局文本样式），但需明确 “可继承 / 不可继承” 属性边界；通过
inherit/initial/unset可灵活控制继承行为，是 CSS 样式优化的基础技巧。