CSS 词条目录
前端Wiki/词条/层叠与继承

层叠与继承

定义样式冲突时的决胜机制（层叠），与子元素自动获得父样式的机制（继承）

层叠按三层决胜：来源与重要性（过渡 > !important > 内联 > 作者样式 > 用户代理默认）→ 优先级（权重）→ 源码顺序。继承只对部分属性生效：颜色、字体、行高、letter-spacing 等「与生俱来」的会继承，而 border、margin、padding、width 等盒模型属性不会。

调试时的通用策略：打开 DevTools 查看被划掉的声明，它会告诉你「谁赢了、为什么赢」。善用 inherit / unset / revert 可以精确控制继承行为，比如让 a 继承父级颜色。

HTML
<style>
  .box { color: #4a9eff; font-size: 15px; border: 2px dashed #e78a3e; }
  .box p { border: inherit; }     /* 强行继承边框（默认不继承） */
  .box a { color: inherit; }      /* 链接继承父色，而不是默认蓝 */
</style>
<div class="box">
  文本与字号线情理之中地传给下面
  <p>边框默认不继承，这里 inherit 强制继承 → 看到虚线框</p>
  <a href="#">链接也变成蓝色（inherit）</a>
</div>
⚠ 常见误区
🔗 相关词条选择器优先级CSS 变量 var()
← 返回来源章节层叠与继承规则