HTML class属性中多个类名必须用单个ASCII空格（U+0020）分隔，CSS选择器需连写如.btn.primary表示交集；JS应使用classList API操作，避免字符串拼接导致错误。
HTML class 属性里多个类名必须用空格分隔
浏览器只认 ASCII 空格（U+0020）作为 class 名之间的分隔符，其他符号都会让后续类名失效。
-
class="btn primary disabled"✅ 正确：三个独立类名，空格是唯一合法分隔符 -
class="btn,primary"❌ 错误：逗号被当作文本一部分，实际只识别btn,primary这一个无效类名 -
class="btn；primary"❌ 错误：中文分号（U+FF1B）或全角空格（U+3000）完全不被解析 -
class="btn-primary"✅ 合法，但这是单个类名，和btn、primary无任何关系
CSS 选择器中多个类名连写不能加空格
写成 .btn.primary 是交集选择器，表示“同一元素同时拥有 btn 和 primary 两个类”；加了空格就变成后代选择器，语义完全不同。
-
.btn.primary→ 匹配<button class="btn primary"> -
.btn .primary→ 匹配<div class="btn"><span class="primary"></span></div>，哪怕span在第五层嵌套里也生效 - 顺序无关：
.primary.btn和.btn.primary效果完全一致 - 多余空格会直接让规则失效：
.btn . primary（中间多空格）不是合法语法，浏览器忽略整条规则
动态操作 class 时别拼字符串，用 classList
JS 中手动改 element.className 容易引入重复类、多余空格或覆盖已有类，classList API 是专为多类设计的解决方案。
-
el.classList.add("active", "loading")—— 安全添加，自动去重、不破坏原有类 -
el.classList.remove("disabled", "pending")—— 不存在的类名不会报错 -
el.classList.toggle("hidden")—— 切换有无，比includes+add/remove更简洁 - 避免：
el.className += " new-class"—— 可能导致开头/结尾多空格，或重复添加
调试时重点核对 HTML class 值与 CSS 选择器是否严格对齐
样式不生效，90% 是因为 HTML 和 CSS 两端的空格逻辑没对上：HTML 里少空格、CSS 里多空格、JS 动态插入时混入不可见字符，都足以让交集匹配失败。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查元素的
class属性值，确认是"a b c"而不是"a,b c"或"a b"（含全角空格） - 在 CSS 文件中搜索
.a.b，确认没有误写成.a .b或.a, .b - 如果用构建工具或模板引擎生成 class，注意它是否会意外插入换行、缩进或转义空格
