CSS继承与层叠规则搞不懂 字体颜色不生效？一文讲清优先级特异性与!important的坑
你打开网页一看，颜色跟设计的完全不一样，明明写了 color: red 啊，怎么就变蓝了？别急，这事儿真不是浏览器成心跟你作对。CSS 的颜色”听谁的”，有一套完整的规则在背后运作，今天咱们就把这套规则掰开揉碎了讲清楚。
先搞清楚一个概念：CSS 到底是怎么”选”样式的？
想象你在房间里穿衣服，可以叠穿很多层：内衣、T恤、毛衣、外套。最后你穿出来什么颜色，取决于谁盖住了谁。CSS 也是类似的道理。
你的 HTML 标签上可以叠好几层 CSS 规则，浏览器最终显示的颜色，是这些规则”打架”之后留下的赢家。
第一个问题：什么是 CSS 继承？
继承就是：父元素设定了某个样式，子元素会自动”跟着学”。
<style>
.parent {
color: blue;
font-size: 18px;
}
</style>
<div class="parent">
<p>这段文字是蓝色的，因为继承了父元素的 color</p>
<span>这段也是蓝色的</span>
</div>
你只给 div 设了 color: blue，里面的 p 和 span 啥都没写，但文字照样是蓝的——这就是继承。
但是！不是所有属性都能继承。 比如 border、margin、padding、background，这些默认不继承。你要是觉得麻烦，可以用 inherit 显式告诉子元素：”跟着你爹走”。
.child {
color: inherit; /* 明确继承父元素的 color */
}
那颜色到底听谁的？关键在”特异性”（Specificity）
特异性就是给选择器打分，分数高的赢。这是解决”为什么我写的颜色不生效”的核心武器。
特异性怎么算分？
| 选择器类型 | 分数 |
|---|---|
内联样式 style="" |
1000 |
ID 选择器 #header |
100 |
类选择器 .active |
10 |
伪类 :hover :first-child |
10 |
标签选择器 div p |
1 |
通配符 * |
0 |
记住：分数是累加的，不是越后面的越厉害。
来看几个例子：
/* 例子1：哪个颜色生效？ */
p { color: red; } /* 特异性 = 1 */
.text { color: blue; } /* 特异性 = 10 */
#main { color: green; } /* 特异性 = 100 */
<p id="main" class="text">这段文字是什么颜色？</p>
答案是绿色。#main 的特异性是 100，碾压其他两个。
/* 例子2：类选择器 vs 标签选择器 */
div { color: red; } /* 特异性 = 1 */
.box { color: blue; } /* 特异性 = 10 */
<div class="box">这段文字是什么颜色？</div>
答案是蓝色。类选择器 10 分 > 标签选择器 1 分。
/* 例子3：多个类叠加 */
.color { color: red; } /* 特异性 = 10 */
.style { color: blue; } /* 特异性 = 10 */
.color.style { color: green; } /* 特异性 = 20 */
<div class="color style">这段文字是什么颜色？</div>
答案是绿色。两个类加起来是 20，高于单独的任何一个。
最常见的坑：为什么我写的 color 不生效？
你写了 .title { color: red; }，结果颜色没变，很可能是你的 HTML 里还有更”高级”的选择器抢了风头。
坑一：ID 选择器权重太高
/* 你写的 */
.title { color: red; } /* 特异性 = 10 */
/* 但 HTML 里这样写 */
<h1 id="page-title" class="title">标题</h1>
/* 页面里还有别处写了 */
#page-title { color: blue; } /* 特异性 = 100 */
你的 .title 再努力，也干不过 #page-title。浏览器先看到 ID 选择器，直接听它的。
坑二：后代选择器叠加分值
/* 这个选择器特异性是 1+10 = 11 */
article .title { color: red; }
/* 这个选择器特异性是 100 */
#main { color: blue; }
<div id="main">
<article>
<p class="title">这段文字是蓝色，因为 ID 选择器赢了</p>
</article>
</div>
就算你写的选择器看起来很长，只要没 ID，就很难赢过带 ID 的。
坑三：!important 的坑比你想的大
很多新手一遇到颜色不生效，第一反应就是加 !important。
.title { color: red !important; }
确实，加了 !important 之后，它会覆盖除了 !important + 更高特异性之外的所有样式。但这不是万能解药，反而会带来更大的麻烦。
/* 假设页面里有两套规则 */
.title { color: red !important; } /* 特异性 10 + !important */
#main .title { color: blue !important; } /* 特异性 110 + !important */
/* 这时候蓝色会赢，因为 110 > 10 */
!important 只能在一个层级里起作用，它不会让你无视特异性。
更可怕的是滥用 !important 之后，你的 CSS 会变成一坨乱麻。后面来维护的人（或者三个月后的你自己）看到满屏的 !important 会想打人。
实操：一步步排查颜色不生效
当你发现写的颜色没生效时，按这个顺序排查：
第一步：打开浏览器的开发者工具
在元素上右键 → 检查，看 computed（计算样式）里，color 的值是什么，以及被划掉的那个规则是从哪里来的。
第二步：算一算特异性
拿你最想生效的规则，跟页面里生效的规则对比，分别算分。
/* 假设你想让这段文字变红 */
.nav .link.active { color: red; } /* 1+10+10 = 21 */
/* 但实际生效的是蓝色 */
.nav a { color: blue; } /* 1+1 = 2 */
/* 等等，21 > 2，为什么蓝赢了？ */
发现了吧？光算特异性还不够，还要看层叠顺序（Cascading Order）。
第三步：看层叠顺序
CSS 层叠有三个维度，按顺序判断：
- 重要性：
!important> 普通规则 - 特异性：ID > 类 > 标签
- 来源顺序：后面的规则覆盖前面的（同样特异性时）
/* 场景：同样的特异性，后写的赢 */
a { color: red; } /* 特异性 = 1 */
a { color: blue; } /* 特异性 = 1，但写在后面，所以蓝色生效 */
<a href="#">点击我</a>
/* 场景：特异性相同，但 !important 的赢 */
a { color: red !important; } /* 1 + !important */
.link { color: blue; } /* 10，但没有 !important */
<a href="#" class="link">点击我</a>
蓝色 specificity 更高，但红色有 !important，所以红色赢。
一个完整的排查案例
假设你有这样一段代码，颜色怎么都不对：
<div class="card">
<h2 class="card-title">卡片标题</h2>
<p class="card-text">这是卡片的描述文字，我想让它变成橙色。</p>
</div>
/* 你的样式文件 */
.card-text {
color: orange;
}
/* 但你发现文字是灰色的！为什么？ */
来，咱们一层层剥开：
第一层：检查有没有更高级的选择器
全局可能有个重置样式或者基础样式：
body * {
color: gray;
}
通配符特异性是 0，但 * 会匹配所有元素。如果你的 .card-text 是后面写的，那应该橙色赢。但如果有：
#page .card-text {
color: gray;
}
那 ID 选择器 100 + 类 10 = 110，直接碾压你的 .card-text（10 分）。
第二层：检查是不是继承抢了风头
p 标签本身可能有默认样式：
p {
color: gray; /* 浏览器默认或框架重置样式 */
}
但 .card-text 是类选择器 10 分，肯定赢过 p 标签的 1 分，所以这里不会有问题。
第三层：检查有没有父元素设了 color
如果 .card 或它的父级设置了 color: gray，而 .card-text 没设，那 gray 会通过继承传下来。但你现在设了 color: orange，所以继承不会覆盖你写的值。
结论：最可能的原因是页面里有一个带 ID 的选择器，或者另一个同样带有 !important 的规则抢了先机。用开发者工具一查就明白了。
关于 !important 的正确用法
!important 不是洪水猛兽，但它是”最后的手段”。以下是合理使用它的场景：
场景一：覆盖第三方库的样式
你引入了一个 UI 框架，它的样式层级太高，你不想改框架源码，只是想在局部覆盖：
/* 框架强制设置的样式，你用 !important 局部覆盖 */
.modal-content {
background: white !important;
}
场景二：打印样式覆盖
打印时强制某些元素不显示或换颜色：
@media print {
.no-print {
display: none !important;
}
}
场景三：用户样式表
浏览器允许用户自己写样式覆盖网站，这类样式天然带有 !important 属性，是浏览器的设计机制，不属于你的责任范围。
原则：能不用就不用。如果你发现必须加 !important 才能让样式生效，通常说明你的选择器写得不够好，应该从根源解决，而不是打补丁。
总结：记住这三句话
- 特异性决定一切：ID > 类 > 标签，多个选择器叠加分值，后写的同样分值覆盖前面的。
- 继承会让父元素的属性”流”到子元素，但子元素自己写的样式优先级更高。
!important是核武器，能不用就不用，用了就要承担维护的代价。
下次再遇到颜色不生效的问题，别再盲目加 !important 了。打开开发者工具，看看是哪个选择器赢了，算一算它们的分值，问题自然就清楚了。