层叠与继承规则

CSS 名字里的「层叠」（Cascade）是它解决冲突的完整裁决流程。当多条规则指向同一元素的同一属性时，浏览器按顺序比较：

• 来源与重要性：浏览器默认样式 < 用户样式 < 开发者样式；带 !important 的规则反向优先。
• 优先级：来源相同时，比较 id / 类 / 标签三段权重。
• 书写顺序：权重也相同，后写的获胜。

继承是另一条重要机制：部分属性（color、font、line-height、text-align 等文字类）会自动传给子元素；而 border、margin、background 等盒子类属性不继承。这符合直觉——父元素改字体，全篇文字跟着变；父元素加边框，不该每个子元素都描边。

两个手动控制的关键字：inherit 强制继承父值，initial 回到默认值。调试「样式为什么生效/不生效」时，先看层叠裁决，再看继承链。

<style>
  body {
    font-family: "Microsoft YaHei", sans-serif;
    color: #333;   /* 文字类属性会继承给后代 */
  }
  .panel { border: 1px solid #ccc; } /* 盒子类不继承 */
  .panel p { color: #666; }  /* 覆盖继承来的 #333 */
</style>
<div class="panel">
  <p>我的字体继承自 body，颜色被自己覆盖</p>
  <span>边框没有传给我，但颜色继承了 body</span>
</div>

📤 分享本文

微博QQQ+贴豆XfinRTGPWA✉

📚 推荐阅读

YY UED 前端规范指南万象云档优达学城前端样式指南万象云档移动前端开发经验指南万象云档Element Plus v2.2 组件库教程万象云档带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读