HTML中多个class名用空格分隔，如class="btn primary large"；CSS中需连写无空格的选择器（如.btn.primary）才能匹配同时具备多个class的元素。
多个 class 名怎么写才有效
HTML 标签上写多个 class，用空格隔开就行，不是逗号也不是点。浏览器会把每个 class 当作独立标识去匹配 CSS 规则，只要任意一个匹配上，样式就生效。
- ✅ 正确：
<div class="btn primary large"> - ❌ 错误：
<div class="btn,primary,large">（逗号会被当作文本内容） - ❌ 错误：
<div class="btn.primary.large">（点是 CSS 选择器语法，不能放 HTML 里）
空格分隔是唯一合法方式，没有例外。哪怕你写了 class=" btn primary "（带多余空格），浏览器也会自动归一化处理，不影响使用。
CSS 里怎么选中同时具备多个 class 的元素
如果想限定“必须同时拥有多个 class”，就得在 CSS 选择器里连写，中间不加空格。比如 .btn.primary 表示既含 btn 又含 primary 的元素，顺序无关紧要，但必须共存。
-
.btn.primary匹配<button class="btn primary">✅ -
.btn.primary不匹配<button class="btn">❌ -
.btn .primary（带空格）是后代选择器，完全不是一回事
这种写法常用于状态叠加，比如 .input.error.dirty 表示“有错误且已被用户修改过”的输入框。注意：类名顺序不影响匹配，但影响 CSS 优先级——多个类名连写时，优先级等于单个类名的叠加，比单类高，比 ID 低。
立即学习“前端免费学习笔记（深入）”；
class 名重复或冲突时谁生效
样式是否生效，取决于 CSS 规则的**特异性（specificity）** 和**书写顺序**，和 HTML 里 class 出现几次没关系。同一个标签上写两遍 class="btn btn"，跟写一遍效果完全一样。
- 重复 class 名会被忽略，不会报错也不会增强权重
- 真正起作用的是 CSS 文件里哪条规则命中了这个元素，以及它的特异性值
- 比如
.btn.primary和.primary同时定义了color，前者一定胜出，因为特异性更高
容易踩的坑：用 JS 动态添加 class 时，没检查是否已存在，导致 DOM 上出现重复 class。虽然不影响渲染，但会让 element.classList 操作变慢，也增加调试难度。
BEM 命名下多个 class 的实际用法
BEM（Block__Element--Modifier）本质就是靠多个 class 协同工作。一个按钮组件常见写法是：<button class="btn btn--primary btn--large">，其中 btn 是基础样式，btn--primary 控制主题色，btn--large 控制尺寸。
- 每个 class 职责单一，避免写成
btn-primary-large这种大杂烩 - JS 控制状态时，只增删 modifier 类（如
btn--loading），不动基础类btn - 不要为了“语义清晰”把所有 class 都塞进一个属性里，比如
class="btn btn--primary btn--large is-disabled"完全合理
真正要注意的是：BEM 类名本身不含空格，所以你在 HTML 里看到的多个 class，其实是多个 BEM 单元的组合，不是 BEM 在“拆分”一个类名。
