html中多个class必须用单个英文空格分隔，如class="btn primary disabled"；逗号、分号、中文空格等均非法；css选择器多类连写（如.btn.primary）表示交集匹配，非后代选择器。
直接在元素标签里写 class="xxx" 就是添加，多个类名用单个英文空格分隔；动态操作必须用 classList，别碰 className 赋值或 setAttribute("class", ...)。
HTML中多个class怎么写才合法
类名之间只能用**一个英文空格**分隔，不能用逗号、分号、中文空格、连字符或制表符。
-
class="btn primary disabled"✅ 正确：三个独立类名 -
class="btn-primary"✅ 合法：这是一个类名，不是两个 -
class="btn,primary"❌ 错误：浏览器只识别btn,primary为一个类名，CSS 无法匹配.primary -
class="1box"❌ 错误：类名不能以数字开头 -
class="my box"❌ 错误：中间空格会让浏览器只认my，box被忽略
JavaScript动态添加多个class为什么不能拼字符串
写 el.className += " active" 看似简单，但会破坏已有结构：可能引入多余空格、重复类名，甚至覆盖掉其他类。
- 原
class="btn"→ 执行el.className += " active"→ 变成class="btn active"✅ - 原
class="btn "（末尾有两个空格）→ 拼后变成class="btn active"❌ 多余空格虽不影响渲染，但后续contains()判断可能因空格不一致失败 - 重复执行多次 →
class="btn active active active"❌ 类名重复无害但冗余，且remove()时得手动去重 - 正确做法：
el.classList.add("active", "highlight")—— 自动去重、静默失败、不污染空格
querySelector 和 classList 对多类名的处理逻辑差异
CSS 选择器里的空格和 HTML class 属性里的空格含义完全相反，这是最容易混淆的点。
-
document.querySelector(".btn.primary")→ 匹配同时含btn和primary的元素（无空格 = 交集） -
document.querySelector(".btn .primary")→ 匹配.btn元素内部的.primary子元素（有空格 = 后代） -
el.classList.contains("primary")→ 只检查是否包含这个类，不管它前面有没有btn或顺序如何 -
el.classList.add("a", "b")和el.classList.add("a b")完全不同：后者是加一个叫a b的类，不是两个
服务端模板或 JSX 中批量绑定 class 容易漏掉什么
变量插值时，空值、false、undefined 会转成字符串，导致无效类名如 "btn undefined" 或首尾空格。
-
className={`btn ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`}→ 若isActive为false，结果可能是"btn disabled"（两个空格），虽不影响渲染但难调试 - 推荐用
clsx：className={clsx("btn", { active: isActive, disabled: isDisabled })}，自动过滤假值、合并空格 - Vue 中用对象语法：
:class="{ btn: true, active: isActive }"，更安全 - 真正容易被忽略的是：类名变更必须同步更新 HTML、CSS、JS 三端——比如把
error改成has-error，但 JS 还在用el.classList.contains("error")，就彻底失效了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
