CSS选择器失效的根源在于匹配逻辑而非文件加载，需排查大小写敏感、空格与符号语义、DOM结构变化、语法错误及Shadow DOM限制。
CSS 文件返回 200 状态码，只说明它被浏览器下载成功了，不等于你的选择器就一定起作用。真正卡在中间的，是选择器和 DOM 结构之间那层“对不上号”的匹配关系。
检查选择器是否拼写或大小写错误
CSS 选择器对字母大小写敏感，而 HTML 的 class 属性本身不区分大小写——这容易造成错觉。
-
class="header"只能被.header匹配，.Header或.HEADER都无效 - 属性选择器如
[type="submit"]要求值完全一致；<button type="submit secondary"></button>不会匹配，得用[type~="submit"] - 伪类如
:focus、:hover在 DevTools 静态检查时必然不生效，不是 bug，是状态未触发
验证空格、连接符与层级语义
一个空格、一个点、一个大于号，语义天差地别。浏览器不会报错，只会默默跳过匹配。
-
.container .btn（带空格）：匹配.container内任意嵌套层级的.btn -
.container.btn（无空格）：匹配同时拥有container和btn两个 class 的单个元素 -
.list > li（子选择器）：只匹配直接子元素；若实际结构是.list > ul > li，这条规则就失效 -
:nth-child(2)按父元素所有子节点顺序计数，和 class 名无关；:nth-of-type(2)才按标签类型算
确认目标元素是否真实存在且结构未变
CSS 是静态解析的，它不等 JS 渲染、不关心条件逻辑、也不穿透 Shadow DOM。
立即学习“前端免费学习笔记（深入）”；
- JS 动态插入的
<p class="tip"></p>，如果 CSS 写的是body > .tip，但实际 DOM 是<section><p class="tip"></p></section>，选择器就断了 - Vue/React 中用
v-if或{condition && <div className="card">}渲染的元素，在条件为 false 时根本不存在，自然不匹配 - Web Components 或自定义元素内部的
<slot>内容，需用::slotted(.item)；普通.item选不到 - Shadow DOM 外的样式默认无法影响其内部节点，必须用
:host .inner或:host-context()
排查选择器被静默忽略的语法陷阱
漏一个分号、少一个右括号、拼错属性名，整条规则都会被浏览器跳过——而且不报错。
-
backgroud-color: red;→backgroud拼错，整行声明作废 -
@media (max-width: 768px) { .box { display: flex; }→ 少了}，会导致其后所有规则失效 -
dispay: none;、font-szie: 14px;这类低级手误极常见，DevTools Styles 面板里根本看不到该规则 -
!important加在拼错的属性上（比如dispay: none !important;）毫无意义，因为那条声明压根没进解析流程
最常被忽略的一点：就算选择器语法全对、DOM 结构也对，如果它出现在一个被浏览器跳过的规则块里（比如媒体查询没闭合、前面有语法错误），它也会彻底消失。不要只盯着“看起来有问题”的那行，要从整个 CSS 文件开头往下扫一眼括号和分号是否成对、闭合。
