html中多个class名用空格分隔，如class=”btn primary large”；css中需连写无空格的选择器（如.btn.primary）才能匹配同时具备多个class的元素。
多个 class 名怎么写才有效
HTML 标签上写多个 class，用空格隔开就行，不是逗号也不是点。浏览器会把每个 class 当作独立标识去匹配 CSS 规则，只要任意一个匹配上，样式就生效。
- ✅ 正确：
<div class="btn primary large"><li>❌ 错误：<code><div class="btn,primary,large">（逗号会被当作文本内容）<li>❌ 错误：<code><div class="btn.primary.large">（点是 CSS 选择器语法，不能放 HTML 里）<p>空格分隔是唯一合法方式，没有例外。哪怕你写了 <code>class=" btn primary "（带多余空格），浏览器也会自动归一化处理，不影响使用。CSS 里怎么选中同时具备多个 class 的元素
如果想限定“必须同时拥有多个 class”，就得在 CSS 选择器里连写，中间不加空格。比如
.btn.primary表示既含btn又含primary的元素，顺序无关紧要，但必须共存。-
.btn.primary匹配<button class="btn primary"></button>✅ -
.btn.primary不匹配<button class="btn"></button>❌ -
.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"></button>，其中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 在“拆分”一个类名。
-