同时匹配多个class的正确写法是连写不加空格，如.a.b表示同一元素兼具a和b类；.a .b则是后代选择器。顺序无关，但必须在同一元素上，且HTML中class值需以空格分隔。
多个 class 同时匹配的写法是连写不加空格
当你要选中同时拥有 .a 和 .b 两个 class 的元素，写法是 .a.b，不是 .a .b（后者是后代选择器，中间有空格）。
常见错误现象：div.a .b 本意想选“既有 a 又有 b 的 div”，结果却匹配了“a 元素内部任意后代中带 b 的元素”。
-
.btn.primary→ 匹配 -
.card.highlighted.active→ 匹配同时含三个 class 的元素 - 顺序无关：只要 class 列表里包含全部指定类名即可，HTML 中
class="tuc-19bc10f7-5f9a5a-0 active highlighted card tuc-19bc10f7-5f9a5a-0"也能被上面的选择器命中
和空格分隔的 class 选择器有什么区别
关键在是否要求“同一个元素”同时具备所有 class。连写 .a.b 是交集；空格分隔 .a .b 是后代关系。
-
.container .header：找.container元素内部任意层级的.header元素 -
.container.header：找 class 属性里同时写了container和header的那个元素 - 性能上，
.a.b更快，浏览器只需检查单个元素的 class 属性；而.a .b需遍历 dom 树查找嵌套结构
实际开发中容易忽略的细节
看似简单，但出问题常是因为 HTML class 值拼写、空格或动态生成逻辑没对齐。
立即学习“前端免费学习笔记（深入）”；
- HTML 中 class 值里不能有空格以外的分隔符，比如
class="tuc-19bc10f7-5f9a5a-0 a,b tuc-19bc10f7-5f9a5a-0"或class="tuc-19bc10f7-5f9a5a-0 a;b tuc-19bc10f7-5f9a5a-0"不会触发.a.b匹配 - js 动态添加 class 时，用
el.classList.add('a', 'b')比el.className += ' a b'更安全，避免重复空格或覆盖 - 框架如 React/Vue 中，class 绑定若写成
:class="tuc-19bc10f7-5f9a5a-0 { 'a': cond1, 'b': cond2 } tuc-19bc10f7-5f9a5a-0"，最终渲染出的是class="tuc-19bc10f7-5f9a5a-0 a b tuc-19bc10f7-5f9a5a-0"，可被.a.b正确匹配
要不要加标签名前缀，比如 div.a.b
通常不需要。加标签名反而降低复用性和维护性，还可能因语义变化失效（比如把
改成
- 例外场景：需要限制作用域，比如防止第三方 css 干扰，或组件 scoped style 中需提高优先级
- 优先级影响：
div.a.b比.a.b权重高（具体是 0-1-2 vs 0-2-0），但应靠 CSS 架构而非强行提权来解决冲突 - 可读性下降：多一层冗余信息，尤其 class 名已足够语义化时（如
.user-avatar.large.rounded）
真正麻烦的往往不是语法本身，而是 class 名在 HTML、JS、CSS 三端没同步更新，或者用空格/逗号/换行误拆了 class 字符串。写完记得 inspect 元素看 computed class 到底是什么。