CSS样式失效的首要原因是选择器未真正匹配目标元素，包括DOM结构变动、空格语义误解、ID/class符号遗漏、动态元素未渲染、CSS文件未加载、路径错误、权重被覆盖、继承限制、display隐藏及媒体查询未触发等。
检查选择器是否真匹配到目标元素
看似正确的选择器，可能因 DOM 结构微小变动或空格语义误解而完全失效。浏览器不会报错，只是静默跳过。
-
.card .title是后代选择器，匹配<div class="card"><h3 class="title">；但若实际结构是<div class="card"><div><h3 class="title">，中间多一层，它仍能匹配；而.card > .title就会失败 -
.btn-primary要求元素同时含两个类：class="btn-primary"有效，class="btn primary"则不匹配——空格分隔即为两个独立 class - ID 和 class 符号不能漏：
#header对应id="header"，写成.header或header都选不到 - 动态渲染的元素（如 Vue/React 挂载后、JS 插入的节点）在初始 HTML 中不存在，Styles 面板里搜不到你的规则，先确认元素已出现在 Elements 面板中
确认 CSS 文件是否真正加载成功
样式没生效，往往不是 CSS 写错了，而是根本没进浏览器。这是 PHP 项目中最常被跳过的“第一关”。
- 打开 DevTools → Network → 刷新页面，过滤
css，看你的文件是否出现且状态码为200；若完全缺失，优先查<link rel="stylesheet">——rel必须是stylesheet（两个t，无y），错写成sytlesheet或styleSheet会被彻底忽略 - 路径错误在 PHP 环境尤其隐蔽：相对路径以当前 PHP 输出的 HTML 文件位置为准，不是以 PHP 脚本位置；比如
index.php在根目录，views/page.php包含它，那<link href="style.css">的解析起点仍是根目录 - 避免用
<script src="xxx.css">引入 CSS —— 浏览器当 JS 解析，直接报语法错误或静默失败
排查权重（specificity）是否被覆盖
即使选择器匹配了，也未必生效。浏览器只执行“赢”的那条规则，不是你写的那条。
- 打开 DevTools → Elements → 选中目标元素 → Styles 面板，找被划掉的声明：那些就是被更高权重规则干掉了；右上角 hover 可见权重值（如
0,1,1,1） -
style="color: red"是内联样式，权重1,0,0,0，几乎无法被外部 CSS 覆盖；JS 动态设置的element.style.color同理 -
#nav .item权重高于.nav-item，哪怕后者写在后面、文件更靠后；不要依赖“后写的就生效”，要靠 specificity 计算 - 慎用
!important：它能临时压倒权重，但会让后续维护变脆弱；优先改选择器，比如从.btn升级为.page-header .btn
注意继承、display 和媒体查询等隐性限制
有些属性天生不继承，有些样式被布局属性悄悄屏蔽，有些只在特定条件下激活——它们不报错，但就是没效果。
立即学习“前端免费学习笔记（深入）”；
-
margin、width、background不可继承；给父元素设margin: 20px，子元素不会获得外边距——这是常见误判点 -
display: none或visibility: hidden下，元素不参与渲染，再复杂的样式也白写；overflow: hidden可能裁掉你精心设置的阴影或下拉菜单 -
@media (min-width: 768px)在手机宽度下整段规则不激活；用 DevTools 的响应式调试工具手动缩放，或点击Toggle device toolbar模拟不同尺寸 - 属性选择器如
input[type='text']要求值严格匹配：HTML 是type="TEXT"，CSS 写[type='text']就不生效，得加i标志：[type='text' i]
rel="stylesheet" 多打了一个 y，或发现 PHP include 的路径让 CSS 的 href 实际指向了 404。这些点不显眼，但卡住整个流程。 
