HTML class属性支持多个类名，须用单个ASCII空格分隔；逗号、分号、中文空格等错误分隔符会导致仅首类生效；推荐使用classList API动态操作以避免重复、覆盖和空格混乱。
HTML 的 class 属性天然支持多个类名，只要用**单个英文空格**分隔，浏览器就能正确识别为独立类；写错分隔符（比如逗号、分号、中文空格）会导致只有第一个类生效，其余被当作文本忽略。
class 属性里多个类名怎么写才合法
这是最常踩坑的地方：语法极其简单，但容错率低。
-
class="btn primary disabled"✅ 正确 —— 三个类同时作用于该元素 -
class="btn,primary"❌ 错误 —— 浏览器解析为一个叫btn,primary的类，CSS 无法匹配.btn.primary -
class="btn;primary"❌ 同样错误，分号不被识别为分隔符 -
class="btn primary"❌ 全角中文空格（U+3000）无效，只认 ASCII 空格（U+0020） -
class="btn-primary"✅ 合法，但这只是一个类名，和btn、primary完全无关
.btn.primary 这种 CSS 选择器到底匹配什么
连写无空格的选择器，表示“同一元素必须同时拥有这两个类”，不是后代关系，也不是“或”关系。
-
.btn.primary匹配<button class="btn primary">，也匹配<button class="primary btn">（顺序无关） -
.btn .primary（中间有空格）匹配的是<div class="btn"><span class="primary"></span></div>，是后代选择器 - 性能上，
.a.b比.a .b快，因为只需检查单个元素的class属性，不用遍历 DOM 树 - 如果 HTML 中 class 值拼错了（比如漏空格或加了逗号），
.a.b就完全不生效，且控制台不会报错，只能靠 inspect 查看 computed class
JavaScript 动态操作多个 class 为什么别拼字符串
直接改 el.className 是高危操作，极易覆盖、重复、空格混乱。
立即学习“前端免费学习笔记（深入）”；
-
el.className += " active"可能导致class="btnactive"（前面没空格）或class="btn active"（两个空格） -
el.classList.add("active", "loading")✅ 安全：自动去重、空格隔离、不存在也不报错 -
el.classList.remove("disabled", "pending")✅ 安全：某个类不存在时静默跳过 -
el.classList.toggle("hidden", isLoading)要小心：第二个参数必须是布尔值，"false"或0仍为真值，会误加 - 别传数组：
el.classList.add(["a", "b"])实际加的是"a,b"这一个类名
React/Vue 中绑定 class 容易漏掉的空值陷阱
模板中动态拼接 class，空字符串、undefined、false 会变成实际类名，造成无效 class 或渲染异常。
- 错误写法：
className={`btn ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`→ 可能生成class="btn disabled"（首尾/多余空格） - React 推荐用
clsx：className={clsx("btn", { active: isActive, disabled: isDisabled })}，自动过滤 falsy 值 - Vue 中用对象语法：
:class="{ 'btn': true, 'active': isActive, 'disabled': isDisabled }"，更安全 - BEM 场景下更要警惕：Modifier 类（如
btn--loading）必须和基础 Block 类（btn）共存，不能让btn因条件判断被剔除
真正难的不是语法本身，而是 class 名在 HTML、JS、CSS 三端没对齐——比如 JS 里加了 error，CSS 却写了 .err，或者模板里漏了个空格，最终渲染出的 class 和选择器根本对不上。写完务必右键 inspect 元素，看 class 属性值和 computed styles 是否符合预期。
