CSS样式不生效通常因选择器权重不足、继承干扰、层叠顺序错误或匹配失败；需用开发者工具检查被划掉的声明、验证继承关系、确认加载顺序及DOM结构匹配性。
CSS样式不生效，但选择器看起来完全正确？大概率是权重（specificity）或层级（cascade/inheritance）在“暗中作祟”。浏览器不是看“你写了什么”，而是看“谁的规则更优先”。下面几个关键点帮你快速定位和解决。
检查选择器权重是否被更高优先级规则覆盖
CSS权重不是简单看选择器长短，而是按四元组计算：内联样式 > ID选择器 > 类/属性/伪类 > 标签/伪元素。比如：
-
div#header.nav.active权重是 0,1,3,1（ID×1 + 类×3 + 标签×1） -
.nav-item:hover是 0,0,2,0 -
style="color: red"内联样式是 1,0,0,0，几乎必赢
打开浏览器开发者工具（F12），选中元素，在 Styles 面板里找被划掉的声明——那些就是被更高权重规则“打败”了。注意右上角显示的实际权重值（部分浏览器支持 hover 查看）。
确认样式是否被继承或重置干扰
有些 CSS 属性（如 color、font-size）天然可继承，而另一些（如 margin、width）不可继承。如果你给父元素设了 color: blue，子元素没显式设置颜色，就会显示蓝色——但这不是你写的那条规则生效了，而是继承来的。
立即学习“前端免费学习笔记（深入）”；
同时注意全局重置（如 Normalize.css 或自定义 reset）可能悄悄覆盖了你的样式。例如：button { all: unset; } 会清空所有默认样式，包括你后续写的部分声明。
排查层叠顺序与加载时机问题
同权重下，后声明的规则胜出。检查你的 CSS 文件引入顺序：外部样式表、<style></style> 块、内联样式，越靠后优先级越高。动态插入的样式（如 JS 插入 <style></style>）也遵循这个逻辑。
另外，确保样式表已成功加载（Network 面板查 404）、没有语法错误（如漏写 } 导致后续整段失效）、以及媒体查询条件未意外屏蔽（比如 @media (min-width: 768px) 在手机上不触发）。
验证选择器是否真匹配到目标元素
看似正确的选择器，可能因 DOM 结构微小差异而失配。例如：
- 写的是
.card .title，但实际 HTML 是<div class="card"> <h3 class="title"> → 匹配成功 </h3> <li>若写成 <code>.card > .title，而中间多了个包裹层 → 不匹配 - 用了伪类如
:focus-visible，但当前是鼠标点击触发，不满足条件 → 规则不激活
在 Elements 面板中右键元素 → “Force element state” 可手动模拟 :hover、:active 等状态，验证伪类是否起效。
不复杂但容易忽略。权重、继承、层叠、匹配——四者齐看，90% 的“样式不生效”问题当场就能破。
