多个类名连写选择器（如.btn.primary）不命中，根本原因是html元素未同时拥有所有指定类名，或误将连写当作后代选择器；需检查dom实际class属性、构建工具类名转换及css特异性覆盖。
多个类名连写的选择器（如.btn.primary）不命中，几乎总是因为 HTML 中对应元素没同时拥有这两个类，或者你误把连写当成了空格分隔的后代选择器。
确认 HTML 元素是否真有全部类名
交集选择器 .a.b 只匹配同时带 a 和 b 两个 class 的单个元素，不是“父元素有 a、子元素有 b”。常见错误是以为 <div class="a"><p class="b"></p></div> 能被 .a.b 匹配——它不能。
- 打开 DevTools，右键目标元素 → “检查”，在 Elements 面板里直接看
class属性值，逐字核对是否包含所有类名、无拼写错误、无大小写偏差（.Button≠.button） - 注意空格：动态拼接 class 时漏空格会变成
class="btnprimary"，浏览器当作一个新类名处理 - Vue/React 中用条件渲染时，确保两个类都在同一节点上：
<button classname="{`${styles.btn}" styles.active :></button>，而不是把active加到别的元素上
区分 .a.b 和 .a .b 的语义差异
这是最常混淆的点。浏览器不会报错，只会静默不匹配。
-
.a.b：要求同一个元素同时有 classa和b，特异性为 0,0,2,0 -
.a .b（中间有空格）：匹配.a内部任意嵌套层级的.b元素，特异性仍为 0,0,2,0，但结构要求完全不同 - 如果 DOM 是
<div class="a"><span class="b"></span></div>，只有.a .b能命中；如果是<div class="a b"></div>，只有.a.b能命中
排查构建工具或框架导致的类名失配
CSS Modules、Tailwind、Vite 或自定义构建流程可能让实际 class 名和你写的不一致。
- CSS Modules 下，
.btn.primary是无效写法——它编译后变成类似.abc123_def456，你必须通过styles.btn和styles.primary拼接，不能手写字符串 - Tailwind 启用了
prefix（如tw-），但模板里还写class="btn primary"，那.btn.primary根本不存在，得写成class="tw-btn tw-primary" - 使用
clsx或cn()时，传入的必须全是有效类名字符串，混入未处理的原始类（如'hidden'而非'tw-hidden'）会导致部分失效
检查是否被更高特异性规则覆盖
即使匹配上了，也可能被划掉。打开 Styles 面板，找带删除线的 .a.b 规则，悬停看提示：
- 如果显示
specificity is lower than another rule，说明有别的规则权重更高，比如#header .a.b（0,1,2,0）或.a.b.c（0,0,3,0） - 第三方库（如 Ant Design）常用深度嵌套或 ID，
.ant-btn-primary:hover权重远高于你写的.btn.primary - 避免用
!important救急，优先改选择器：用.my-component .btn.primary或[data-role="button"].primary提升可控性
真正卡住的往往不是语法，而是你“以为它在那儿”和它“实际在哪儿”之间的偏差——DOM 结构、构建输出、框架抽象层，三层之下都可能藏一个空格或一个哈希值。每次怀疑选择器失效，先查 Elements 面板里的真实 class 属性，再看 Styles 面板里有没有那个类名出现，最后才动笔改 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
