为什么CSS类选择器写对了却没有生效？

类选择器写对却没生效，大概率是未匹配目标元素：检查class属性是否真实存在、拼写大小写及连字符是否完全一致；确认DOM结构与选择器层级（如空格/＞/＋）吻合；排查语法错误致整条规则静默失效或被高优先级规则覆盖。

类选择器写对了却没生效，大概率不是“写错了”，而是它根本没匹配上目标元素——浏览器解析 CSS 时不会报错，只会静默跳过不匹配的规则。

检查 class 属性是否真实存在且拼写完全一致

HTML 的 class 属性值和 CSS 中的 .classname 必须逐字符一致，包括大小写、连字符、空格位置。

1. class="header-nav" 只能被 .header-nav 匹配，.headerNav 或 .Header-Nav 都无效
2. class="btn primary" 是两个独立 class：.btn 和 .primary；.btn-primary 是另一个 class，三者互不等价
3. JS 动态插入的元素（如 el.classList.add("active")）要确认执行时机：若在 DOM 渲染前操作，该 class 可能根本没写入 HTML

确认选择器层级与 DOM 结构是否吻合

一个空格、一个 >、一个 +，语义完全不同，但浏览器不会提示错误。

1. .container .item（后代）能匹配 <div class="container"><ul><li class="item"></li></ul></div>
2. .container > .item（子元素）则无法匹配上面结构，因为 .item 不是 .container 的直接子节点
3. .list li:nth-child(2) 按父元素所有子节点顺序计数，不是按 li 标签个数；若第一个子节点是 <h3>，那第二个 li 实际是 :nth-child(3)

排查被更高优先级规则覆盖或整条规则静默失效

DevTools 的 Styles 面板里出现删除线（灰色横线），说明被覆盖；如果压根没出现你的规则，可能是语法错误导致整条被丢弃。

1. 漏掉右大括号 }：会导致其后所有规则都不解析，常见于 @media 块末尾
2. 拼错属性名：backgroud-color: red; 中 backgroud 少了个 r，整行声明作废，且不报错
3. !important 加在拼错的属性上（如 dispay: none !important;）毫无意义——那条声明根本没进解析流程
4. ID 选择器（#header .nav a）比类选择器（.nav-link）权重高得多，后者会被前者轻易覆盖

注意动态渲染、Shadow DOM 和缓存干扰

这些场景下，CSS 规则“写了”不等于“起效”，因为匹配时机或作用域已变化。

1. Vue/React 中用 v-if 或 {condition && <div className="card">} 渲染的元素，在条件为 false 时 DOM 中不存在，自然不参与选择器匹配
2. Web Components 内部的 <slot> 内容，外部样式默认无法影响；要用 ::slotted(.item) 或 :host .inner
3. 本地开发时改完 CSS 刷新没反应？先按 Ctrl+Shift+R（Windows）或 Cmd+Shift+R（macOS）强制重载，排除缓存干扰

最常被忽略的一点：CSS 是静态解析的——它不等 JS 执行、不关心条件逻辑、也不穿透 Shadow DOM 边界。匹配失败往往不是代码问题，而是你写的规则和最终渲染出的真实 DOM 之间，差了一层“看不见的结构落差”。