.classA.classB 是交集选择器，要求同一元素同时具备两个class，如<div class="classA classB">；.classA .classB 是后代选择器，匹配.classA内任意层级的.classB元素；.classA,.classB 是并集选择器，匹配任一条件。
.classA.classB 是交集选择器，要求同一元素同时具备两个 class
它匹配的是 class="classA classB" 这样的单个元素，比如 <div class="classA classB"></div>。中间没空格，表示逻辑“与”关系——必须同时拥有这两个类名，缺一不可。
常见错误现象：.btn.primary 写成 .btn .primary（多了空格），结果按钮样式完全不生效，因为浏览器去找“.btn 元素内部的 .primary 子元素”，而实际按钮本身才是目标。
- HTML 中 class 值必须用空格分隔，如
class="classA classB" - 顺序无关：
class="classB classA"同样能被.classA.classB匹配 - 特异性（specificity）比单个类高：
.classA.classB的权重是 0,0,2,0，比.classA（0,0,1,0）更容易覆盖默认样式 - 性能更好：浏览器只需检查单个元素的
class属性，不用遍历 DOM 树
.classA .classB 是后代选择器，匹配嵌套关系
它匹配的是任意在 .classA 元素内部、任意嵌套层级里的 .classB 元素。空格是关键，代表“后代”而非“同元素”。
使用场景举例：给文章容器 <article class="post"> 下所有标题加样式，可写 .post h2；若想限定只作用于带 highlight 类的子标题，则用 .post .highlight。
立即学习“前端免费学习笔记（深入）”；
- 不要求
.classB元素本身有.classA——它甚至可以是孙子、曾孙级元素 - 容易误写成意图相反的选择器，比如本想高亮某个特定按钮，却写了
.modal .btn，结果模态框里所有按钮都被影响 - 性能开销略大：浏览器需递归查找 DOM 树中符合条件的后代节点
- 若只想匹配直接子元素（不包括孙子），应改用子选择器
.classA > .classB
逗号分隔的 .classA,.classB 是并集选择器，作用于两类元素
它不是“和”的关系，而是“或”：匹配所有 class="classA" 的元素，也匹配所有 class="classB" 的元素。逗号是并集操作符，和空格、连写有本质区别。
典型用途是复用相同样式，比如统一设置多种状态按钮的禁用外观：.btn.disabled, .btn[disabled]。
- 每个选择器独立解析，
.classA和.classB可以完全无关 - 特异性按单个选择器分别计算，不会叠加
- 注意不要和连写混淆：写成
.classA, .classB（逗号前后有空格）完全合法，但空格只是格式，不影响语义
最容易被忽略的细节：HTML class 属性值必须空格分隔，且大小写敏感
即使 CSS 选择器写对了，如果 HTML 里写成 class="classAclassB"（没空格）或 class="ClassA ClassB"（大小写不一致），.classA.classB 就不会命中。
CSS 类选择器严格区分大小写，.header 不会匹配 class="Header"；而 class 属性值中的空格是分隔符，不是内容的一部分。
- 验证方法：打开浏览器开发者工具，选中目标元素，看 Elements 面板中
class属性是否确实包含两个空格分隔的类名 - 动态添加 class 时（如 JS 的
element.classList.add("classB")），也要确保没有拼错或遗漏空格 - 构建工具或框架（如 Vue/React）中，class 绑定语法出错也会导致最终 HTML 不符合预期
