html中多个class名必须用单个英文空格分隔，css选择器中多个类名连写不加空格；class="btn primary"正确，".btn .primary"是后代选择器而非多类匹配。
HTML 元素可以同时拥有多个 class，只要用空格分隔即可，不需要任何符号连接。
class 属性值里多个类名用空格分隔
这是最基础也最容易写错的地方：多个 class 名之间**必须且只能用单个空格**，不能用逗号、顿号、中文空格或连字符连接。
-
class="btn primary large"✅ 正确 —— 三个独立类名：btn、primary、large -
class="btn,primary"❌ 错误 —— 浏览器会把它当成一个类名btn,primary，CSS 无法匹配 -
class="btn primary"❌ 错误 —— 中文全角空格（U+3000）不被识别为分隔符 -
class="btn-primary"✅ 合法，但这是**一个类名**，不是两个；它和btn、primary完全无关
多个 class 的 CSS 选择器怎么写
多个 class 同时存在时，CSS 选择器要连写，中间**不加空格**，表示“同时拥有这些类”。
-
.btn.primary匹配同时有btn和primary的元素 -
.btn .primary（注意中间有空格）匹配btn元素内部的primary元素 —— 这是后代选择器，不是多类名匹配 - 顺序无关：
.primary.btn和.btn.primary效果完全一样 - 如果只想用其中某个类，比如只写
.btn，那只要含btn就匹配，不管有没有其他类
JavaScript 中通过 class 操作元素要注意什么
用 document.querySelector 或 classList 处理多 class 时，空格和点号含义完全不同。
-
document.querySelector(".btn.primary")✅ 找同时带两个类的元素 -
document.querySelector(".btn .primary")❌ 找嵌套关系，容易误判 - 添加类：
el.classList.add("active", "highlight")——add()支持多参数，比拼字符串安全 - 检查是否含某类：
el.classList.contains("disabled")，不是检查整个class字符串 - 避免直接操作
el.className = "a b"，会覆盖原有所有类；优先用classList
真正容易出问题的不是“怎么写多个 class”，而是混淆了“空格分隔 class 值”和“空格分隔 CSS 选择器”的语义。前者是 HTML 属性值语法，后者是 CSS 选择器语法，两者规则相反，记混就全乱了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
