写前端的时候，是不是经常遇到这种抓狂的瞬间：明明在 CSS 里给按钮写了鲜艳的红色，结果页面一渲染，它偏偏变成了灰色？或者父盒子明明设了 padding: 20px，子元素却像没看见一样直接贴边？别急着砸键盘，这其实不是浏览器在跟你作对，而是 CSS 的“继承”和“层叠”规则在背后悄悄打架。今天咱们不背枯燥的规范，直接用生活里的例子和真实代码，把这套规则掰开揉碎，让你以后写样式时心里有本明镜，遇到覆盖报错一眼就能定位。
继承：CSS 里的“家族遗传”
你可以把 CSS 继承想象成家族遗传。有些属性天生就是会顺着 DOM 树往下传的，比如文字颜色 (color)、字号 (font-size)、字体族 (font-family)、行高 (line-height)。你在最外层的 <body> 上写了 color: #333;，里面的所有段落、标题、甚至嵌套的 <div> 都会自动继承这个颜色，除非你后来显式地改掉了它们。
但注意，不是所有属性都认爹妈。像 margin、padding、border、background、width、height 这些跟盒模型和视觉呈现强相关的属性，默认是不继承的。这就解释了为什么你给父容器加了内边距，子元素并不会跟着变大——它们得自己乖乖写自己的 padding。理解这一点，能帮你省下大量重复写样式的功夫，也能明白为什么有时候子元素会“叛逆”地脱离父级样式。
层叠与优先级：谁才是最终的“裁判”？
既然有继承，那当多个规则同时指向同一个元素时，听谁的？这就是“层叠”(Cascading) 的核心。CSS 不是随机挑一个，而是有一套严密的打分系统，我们叫它特异性 (Specificity)。你可以把它看作一场选美比赛，评委只看三张选票：
| 选择器类型 | 示例 | 权重分值 |
|---|---|---|
| 行内样式 | <div style="color:red;"> |
1,0,0,0 |
| ID 选择器 | #header |
0,1,0,0 |
| 类/伪类/属性 | .btn, :hover, [type="text"] |
0,0,1,0 |
| 元素/伪元素 | div, p, ::before |
0,0,0,1 |
权重从高到低叠加比较。比如 #nav .link:hover 的权重是 0,1,1,1，它会稳稳压过 div p span 的 0,0,0,3。
除了权重，还有两条铁律：
- 来源顺序：如果两个规则的权重完全一样，后写的会覆盖先写的。
!important：它相当于直接掀桌子宣布“我说了算”，优先级最高，但会彻底打乱后续的维护节奏，能不用就不用。
实战拆解：字体颜色为什么会乱跳？
假设你有这样一段 HTML：
<nav id="main-nav">
<a href="#" class="link active">首页</a>
</nav>
你的 CSS 可能是这么写的：
/* 规则 A */
nav a { color: blue; } /* 权重 0,0,0,2 */
/* 规则 B */
.link { color: gray; } /* 权重 0,0,1,0 */
/* 规则 C */
#main-nav .active { color: red; } /* 权重 0,1,1,0 */
按权重算，规则 C 的 0,1,1,0 碾压其他两者，所以链接显示红色。但如果你某天随手改了 HTML，把 id="main-nav" 删了，或者把 .active 拼写错了，权重瞬间暴跌，蓝色或灰色就会突然跳出来覆盖红色。这就是典型的“优先级隐形坍塌”。
快速修复步骤：
- 按
F12打开开发者工具，切换到Elements面板。 - 选中那个颜色不对的元素，右侧
Styles栏会列出所有匹配的规则。 - 仔细看：带删除线的是被覆盖的，绿色高亮的是最终生效的。
- 看到底哪个选择器权重不够，就给它补一个类名，或者把 ID 换成更具体的类组合。保持权重稳定，颜色就不会乱跑了。
布局冲突：为什么 padding 和 width 总是打架？
布局冲突通常更隐蔽，因为涉及盒模型和流式布局。比如你想做一个卡片组件，外层 .card 设了 display: flex，内层 .card-content 想独占一行，结果发现怎么调 width 都不听话，甚至被父级的 padding 挤变形了。
这时候往往是因为全局样式或第三方库偷偷塞进了高权重的选择器，比如 body .card-content { width: 50%; }。硬刚权重只会让 CSS 越来越臃肿。现代前端更推荐用“隔离”和“标准化”来破局：
/* 1. 统一盒模型计算方式，这是解决布局溢出最关键的一步 */
*, *::before, *::after {
box-sizing: border-box;
}
/* 2. 使用 CSS 自定义属性集中管理布局参数，避免硬编码冲突 */
:root {
--card-gap: 16px;
--card-padding: 20px;
}
.card-layout {
display: grid;
gap: var(--card-gap);
padding: var(--card-padding);
/* box-sizing 已经全局设置，这里无需重复声明 */
}
.card-item {
background: #f5f7fa;
border-radius: 8px;
/* 不再需要写死 width，grid 自动处理换行与对齐 */
}
如果团队项目确实遇到了跨文件样式污染，强烈建议直接使用 @layer 语法。它能给 CSS 规则打上明确的“优先级标签”，彻底告别猜权重的痛苦：
/* 定义层级顺序，写在最前面 */
@layer reset, base, components, utilities;
@layer reset {
/* 浏览器默认样式清零 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
}
@layer base {
body { font-family: system-ui, sans-serif; line-height: 1.5; }
}
@layer components {
/* 这里的样式优先级固定高于 base，无论书写顺序如何 */
.btn-primary { background: #007bff; color: white; padding: 0.5em 1em; }
}
@layer utilities {
/* 最低优先级，专门放工具类 */
.mt-2 { margin-top: 0.5rem; }
}
排查心法：让样式覆盖不再成为噩梦
排查样式覆盖最好的习惯不是靠运气，而是靠流程。每次接手新项目或搭建基础组件库，第一件事永远是引入一套规范的 Reset CSS 或 Normalize.css，把浏览器默认的 margin、padding 清零，建立干净的画布。写样式时，尽量遵循“由外向内、由粗到细”的顺序，先定大框架的 Flex/Grid 布局，再填颜色字体。
遇到搞不定的覆盖，深呼吸，打开 F12，右键点击元素选“检查”，盯着右侧的 Computed 面板看最终计算出的值，对比 Sources 面板里的具体文件。你会发现，大部分时候问题就出在一个多打的分号、一个漏写的类名，或者一个不该存在的 !important 上。
前端开发就像搭积木，CSS 的继承和层叠不是拦路虎，而是帮你省力的隐形助手。摸清了它的脾气，那些颜色乱跳、布局错位的小毛病自然迎刃而解。下次再看到样式没生效，别急着重写，先想想它到底输给了谁。慢慢来，你会发现自己写 CSS 的速度和准确率，直接翻倍。