class属性值里没空格，浏览器当成一个类名；多个类名必须用单个英文空格分隔，如class="btn primary"，才能被.btn.primary等交集选择器匹配。
class属性值里没空格，浏览器当成了一个类名
HTML 的 class 属性值必须用空格分隔多个类名。如果写成 class="btnprimary" 或 class="btn-primary"，浏览器就只认这一个整体字符串，不会拆成 btn 和 primary 两个类。CSS 选择器 .btn.primary 要求元素**同时拥有**这两个类，前提是它们真实、独立地存在于 class 属性中。
- ✅ 正确：
class="btn primary"→ 可被.btn.primary匹配 - ❌ 错误：
class="btnprimary"→.btn.primary完全不匹配（没有btn类，也没有primary类） - ❌ 错误：
class="btn-primary"→ 这是一个单独的类名，.btn.primary不会匹配它
.btn.primary 是交集选择器，不是“带连字符”的命名习惯
.btn.primary 的语义是“同时具备 btn 和 primary 两个 class”，不是“类名里带点”。它和 BEM 的 btn--primary 或自定义组件名 MyButton 完全无关。很多开发者误把 CSS 选择器写法套用到 HTML class 值上，比如写 class="btn.primary"，这会导致解析失败——因为 . 不是合法 class 字符，浏览器直接截断，只留下 class="btn"。
- 非法字符（如
.、#、中文、空格）会让浏览器静默丢弃后续部分 -
class="btn.primary"实际等价于class="btn"，.primary部分被忽略 - 想表达“主要按钮”，应写
class="btn primary"，再用.btn.primary精准控制样式
动态添加 class 时拼接错误最常见
JS 中用 element.className = 'btn primary' 或 element.classList.add('btn', 'primary') 是安全的；但手拼字符串时极易出错：
- ❌
el.className = 'btn' + '.primary'→ 结果是btn.primary（非法） - ❌
el.className = 'btn-primary'→ 单一类名，无法触发交集规则 - ✅
el.className = 'btn primary'（注意中间空格） - ✅
el.classList.add('btn', 'primary')（推荐，自动空格分隔）
Vue/React 中也一样：:class="{ 'btn': true, 'primary': isPrimary }" 才能生成正确空格分隔的 class 字符串。
调试时别只看 Elements 面板的 class 属性文本
开发者工具里看到 class="btn primary" 并不等于它真被 CSS 规则捕获了。打开该元素的 Computed 标签页，直接查看 “Classes” 列表 —— 那里显示的是浏览器实际识别出的类名数组。如果列表里只有 ["btn"]，说明 primary 没加进去，或被 JS 覆盖、拼写错误、大小写不一致（Primary ≠ primary）。
框架 scoped style、CSS Modules 或 PostCSS 插件还可能重命名 class，此时源码写的 .btn.primary 在运行时根本不存在，必须查 Computed 里的真实类名再反推。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
