答案是选择器未匹配目标元素，需用开发者工具检查styles面板中规则是否出现、确认class名与html一致、区分后代与多类选择器、注意id/class/标签名符号、排查动态元素是否存在、优先级覆盖、继承属性限制、display/visibility隐藏及overflow裁剪等问题。
选择器根本没选中目标元素
浏览器不会报错，只是静默忽略——你写的类选择器可能压根没命中 DOM 中那个节点。打开 DevTools → 右键元素 →「检查」→ 在 Styles 面板里搜你的规则名，如果完全没出现，说明匹配失败。
常见原因包括：
-
.btn-primary对应的 HTML 是class="btn primary"（空格分隔 ≠ 多类同时存在） - 写了
.container .header（后代选择器），但目标<div class="header"> 并不在 <code>.container内部 - 实际元素是
<span class="icon-close"></span>，而你写了.icon_close（下划线 vs 短横线） - JS 动态插入的元素还没挂载完成，DOM 中暂时不存在该节点
-
element.classList.add('Active')和.active { color: red; }不匹配（大小写不同） -
element.classList.add(' btn-item ')实际添加的是两个 class：""（空字符串）和"btn-item "（尾部带空格） - 模板字符串拼接出错：
`${prefix}-item`中prefix为空或含非法字符，生成了""-item或"undefined-item" -
#nav .item（ID + class）比.nav .item（两个 class）优先级高 -
style="color: blue"（内联样式）几乎总是赢过所有外部 CSS -
.tree ul.normal::before这种嵌套写法容易因层级过深反而降低可维护性，也易被更扁平的规则覆盖 -
:host(.my-class) { ... }—— 匹配宿主元素自身带该 class -
::slotted(.my-class)—— 匹配 slot 中传入的、带该 class 的子元素 - CSS Modules 或 Vue 的
scoped样式会自动哈希类名，.button实际编译成.button_abc123，直接写.button必然失效
类名拼写、空格或大小写不一致
CSS 类名严格区分大小写，且对空格极其敏感。哪怕 JS 里多加一个空格，也会导致匹配失败。
例如：
样式被更高权重规则覆盖
即使选择器匹配成功，也可能被其他 CSS 规则“盖掉”。看 Styles 面板里你的声明是否被划掉——那是 specificity 比你高的规则在生效。
权重判断要点：
Shadow DOM 或动态加载导致样式隔离
如果目标元素在 Shadow Root 内（比如 Web Component、某些 UI 库封装的组件），外部定义的 .my-class 默认无法穿透作用域。
必须用专用语法：
这类问题往往只在真实运行时暴露，静态检查很难发现。最稳妥的方式是打开 Elements 面板，确认目标节点上渲染出的实际 class 名，再反推 CSS 是否能对得上。
