HTML class属性支持多个类名，用单个ASCII空格分隔；错误写法如逗号或分号分隔会导致仅首类生效；推荐使用classList API动态操作，避免字符串拼接问题。
class 属性里写多个类名，用空格分隔就行
HTML 的
属性本身支持多个类名，只要用**一个空格**隔开即可，浏览器会自动识别为多个独立的 CSS 类。不需要逗号、分号或引号包裹——加了反而会出错。
常见错误现象：
或
，这样写会导致只有第一个类（
）生效，其余被当作文本忽略。
✅ 正确：三个类同时作用于该元素
✅ 合法：这是一个单独的类名（连字符是允许的）
✅ 多个空格等同于一个，不影响解析
动态添加/切换多个类名，别直接拼字符串
JS 中手动拼接
容易覆盖已有类或引入重复、多余空格。推荐用
API，它专为多类名操作设计。
使用场景：按钮点击切换状态、表单校验后添加错误类、响应式布局类切换等。
立即学习
“
前端免费学习笔记（深入）
”；
—— 一次加多个，不重复
—— 安全移除，不存在也不报错
—— 切换单个类；
强制添加
避免：
—— 可能导致重复、空格混乱、意外覆盖
CSS 里多个类名连写，表示“同时满足”
当选择器写成
（中间无空格），意思是“同时拥有
和
两个类”的元素。这不是后代选择器，而是交集匹配。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
性能与可读性影响：这类选择器 specificity 较高（比单类名高），但过度嵌套（如
）会让样式难以复用和调试。
匹配：
（带空格）才匹配：
classclass="btn, primary, disabled"class="btn;primary"btnclass="btn primary disabled"class="btn-primary"class="btn primary disabled"classNameclassListel.classList.add("active", "highlight")el.classList.remove("disabled", "pending")el.classList.toggle("hidden")el.classList.toggle("fade", true)el.className += " new-class".btn.primarybtnprimary.card.header.active.loading.btn.primary.btn .primary
多个类名在 HTML 中顺序无关，但在 CSS 里连写时，顺序也不影响匹配结果
服务端模板或 JSX 中批量传类名，注意空值和布尔逻辑
React/Vue/模板引擎中常通过变量拼接 class，容易漏掉空格、插入
undefined
或
false
导致类名错乱。
容易踩的坑：
className={`btn ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`}
—— 多个空格或首尾空格可能产生无效类名（如
"btn disabled"
）。
React 推荐用
clsx
库：
className={clsx("btn", { active: isActive, disabled: isDisabled })}
Vue 模板可用对象语法：
:class="{ 'btn': true, 'active': isActive, 'disabled': isDisabled }"
纯 JS 拼接时，用
filter(Boolean).join(' ')
清理空值：
[base, isActive && 'active', isDisabled && 'disabled'].filter(Boolean).join(' ')
最常被忽略的是：类名之间必须是**单个 ASCII 空格**，不能是全角空格、换行或制表符；服务端渲染时尤其要注意模板缩进是否意外混入空白字符。