TRAE-AI编程
先给结论：样式写了没反应，绝大多数情况不是 CSS 语法写错，而是这条规则被另一条规则盖掉了。排查顺序固定三步——先在浏览器开发者工具里确认规则有没有被划掉，再比一比选择器的权重谁高，最后才回头看加载顺序和拼写。
新手学 CSS 最容易被这件事劝退：明明照着教程写了选择器，页面却一点变化都没有。更难受的是，同样的写法换一个页面又能生效，于是开始怀疑自己记错了属性名。实际上 CSS 有一套固定的仲裁规则，叫做层叠。浏览器拿到一堆互相冲突的声明之后，并不是简单地让"后写的赢"，而是先比来源、再比权重、最后才比先后顺序。把 CSS 优先级这套顺序搞清楚，比多背十个属性有用得多。
本文用一个可以复现的最小页面演示这套判断顺序：为什么内联样式几乎总能赢、为什么一个 id 能压过一堆 class、以及为什么滥用 !important 之后代码会越来越难改。示例不依赖任何框架，复制进一个 HTML 文件就能跑。
先看结论
- 规则被划掉：说明选择器没匹配上元素，或者输给了更高权重的规则，先看开发者工具的 Styles 面板。
- CSS 优先级算不过：一个 id 选择器的权重高于任意数量的 class 选择器，靠堆 class 是堆不过的。
- 加载顺序不对：同权重时后加载的赢，外链样式表、style 标签、内联样式三者的地位并不相同。
属性名记不清的时候，翻 CSS 教程 里按属性分组的清单最快。
一、最小场景与预期行为
把问题定死：一个页面里有一个按钮，你想把它改成橙色，写了 .btn { background: #fe6a00; } 却发现按钮还是灰的。
输入是一段 HTML 加一段 CSS。预期行为是按钮变橙。实际行为是没变。任务就是找出这条声明为什么没被采纳。
<button class="btn primary">提交</button>.btn {
background: #fe6a00;
}
#submit-area .btn.primary {
background: #cccccc;
}这段做的是：先用 class 选择器把按钮设为橙色，再用一条带了 id 的选择器把它设回灰色。两条规则都命中了同一个元素，最终生效的是第二条。
预期结果（未在本机执行）：按钮呈现灰色。原因不是 .btn 写错了，而是 CSS 优先级里带 id 的那一档更高。如果你的真实页面里按钮没变橙，第一步要做的就是把这类"更长的选择器"找出来。
二、三步排查：命中、权重、顺序
2.1 第一步：确认选择器有没有命中
打开开发者工具，选中元素，看 Styles 面板。这里有三种典型状态：
- 你的规则根本没出现在面板里：说明选择器没匹配上，查类名拼写、查元素层级、查是不是写在了父元素上。
- 规则出现了但被划掉：说明匹配上了，只是被别的规则覆盖。
- 规则出现了、没被划掉，但样式没变：查属性名是否被简写属性覆盖，或者值本身非法（浏览器会忽略非法声明）。
验证方法很直接：在 Styles 面板里手动勾掉其他规则，只留你那条，看样式是否恢复。恢复了就确认是覆盖问题，不是语法问题。
2.2 第二步：比较选择器权重
CSS 优先级的计算不看"选择器写了多长"，而是按位置分档：id 选择器数量、class / 属性 / 伪类数量、元素 / 伪元素数量，逐档比较，前一档分出胜负就不再看后面。
/* 权重 0-1-0：一个 class */
.btn { background: #fe6a00; }
/* 权重 0-2-0：两个 class，高于上一条 */
.btn.primary { background: #ffb27a; }
/* 权重 1-2-1：一个 id + 两个 class + 一个元素，最高 */
#submit-area .btn.primary { background: #cccccc; }
这段做的是把三条规则按权重从低到高排好。注意最后一条里的元素选择器 button 只是再加一档最低位，真正决定胜负的是那个 id。
结论是：想覆盖一条带 id 的规则，堆十个 class 也没用，要么同样用 id，要么降低对方的选择器长度。理解了 CSS 优先级这一档之后就能明白，很多团队约定"样式只用 class、不用 id"是有道理的。
2.3 第三步：看清来源与加载顺序
权重相同的时候，才轮到顺序说话：后出现的赢。这里的"先后"是样式表被解析的先后，不是你在文件里书写的先后。
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="theme.css">
<style>
.btn { background: #fe6a00; }
</style>这段做的是：base.css 先加载、theme.css 后加载，所以 theme.css 里同权重的规则会盖掉 base.css。而页面内的 style 标签在两者之后解析，同权重时它的优先级更高。
排查加载顺序的快招是：在 Elements 面板里看每条规则右侧的文件名与行号，谁排在后面谁说话。引入第三方组件库时尤其要注意，很多"样式不生效"其实是自己的样式表被组件库的样式表压在了下面。
三、内联样式与 !important 的代价
内联样式写在元素的 style 属性上，它在 CSS 优先级里天然高于所有外链与 style 标签里的同权重规则，只有加了 !important 的声明才能压过它。
<button class="btn" style="background: #cccccc;">提交</button>.btn {
background: #fe6a00 !important;
}这段做的是：内联的灰色本来会赢，加了 !important 后橙色反过来胜出。看起来问题解决了，但代价是这条声明从此几乎无法被覆盖，后面的人只能继续加 !important，最后整份样式表变成互相加码的战场。
更稳的做法是：不要和内联样式硬碰，而是把内联样式去掉，或者在 JavaScript 里改成切换 class。样式该由样式表管，别让两套系统抢同一个属性。
适用边界要讲清：!important 在覆盖第三方库样式、以及写打印样式的时候仍然是合理工具，只是不该成为日常排查的默认手段。
四、常见失败分支与验证清单
4.1 选择器写对但元素不存在
动态渲染的页面里，元素往往在脚本执行后才出现，选择器写在静态 HTML 阶段是查不到问题的。修复办法是在元素真的出现之后再查，或者改用事件委托配合稳定的父元素。
4.2 简写属性把长写属性清掉了
写 background 会重置 background-image，写 font 会重置 font-weight。后出现的简写属性会把前面的长写属性一并清掉。修复办法是统一用同一种写法，别混着来。
4.3 缓存导致改了没反应
浏览器缓存了旧的样式表，改完刷新也看不到变化。修复办法是给样式表加版本号查询串，或者在开发者工具里勾上禁用缓存。
4.4 验证清单
- 检查：Styles 面板里你的规则是否存在、是否被划掉
- 运行：逐条勾掉其他规则，只保留目标规则，观察样式是否恢复
- 预期：恢复则说明是权重或顺序问题；不恢复则说明选择器没命中
- 失败：勾掉全部仍无变化 → 属性值非法或属性名拼错
- 修复：改用开发者工具里被采纳的属性名，重新加载页面
- 验证：清空缓存后再看一次，确认结果稳定
上面这些步骤做的是定位覆盖关系、排除缓存干扰、确认最终生效值。预期结果（未在本机执行）是三次结论一致；如果清空缓存后结果变化，说明前面看到的是缓存假象。
总结
样式不生效不是玄学，而是层叠规则在起作用：先看规则有没有命中元素，再比选择器权重，最后才看来源与加载顺序。把 CSS 优先级这三层顺序记牢，!important 和内联样式能强行改变结果，但会把后续维护成本推高。
三条要点带走：
- 排查入口永远是开发者工具的 Styles 面板，被划掉就是被覆盖，没出现就是没命中；
- CSS 优先级按 id / class / 元素三档逐档比较，堆 class 堆不过一个 id；
- 同权重才比顺序，顺序指的是样式表被解析的先后，不是书写先后。
下一步建议给团队的样式表定一条简单约定：选择器只用 class，不写 id，不用 !important。这条约定能消掉大半的样式不生效问题。属性细节拿不准时，查 CSS 参考手册 里对应属性的默认值与继承性。
常见问题
Q：为什么加了 class 还是盖不住原来的样式？
A：多半是对方的规则带了 id 选择器。CSS 优先级里 id 的权重高于任意数量的 class，需要同样用 id 才能覆盖，或者把对方选择器里的 id 去掉。
Q：为什么我的样式在开发环境生效，上线后就不生效了？
A：常见原因是打包后样式表的加载顺序变了，或者浏览器缓存了旧的样式文件。先看线上页面里两条规则的先后顺序，再清空缓存重试。
Q：!important 到底能不能用？
A：能用，但只在覆盖第三方库样式、写打印样式这类场景用。日常业务样式里用它，会让后面的每一次覆盖都要再加一次 !important。
Q：内联样式和外链样式谁优先？
A：CSS 优先级里内联样式高于外链和 style 标签里的同权重规则。想覆盖它只能加 !important，所以更推荐直接把内联样式删掉。
Q：规则没被划掉，样式却没变化是什么原因？
A：查两件事：属性名是否拼错、属性值是否合法。浏览器会静默忽略无法解析的声明，并不会报错。
延伸学习
想把层叠这套规则练熟，可以按这个顺序来：
