.a.b是交集选择器，匹配同时拥有a和b类的单个元素；.a .b是后代选择器，匹配.a内部任意层级的.b元素；空格在HTML class中是分隔符，在CSS选择器中是关系符，二者语义完全不同。
`.a.b` 和 `.a .b` 匹配逻辑完全不同
前者是交集选择器，要求单个元素同时拥有 a 和 b 两个类；后者是后代选择器，匹配所有在 .a 元素内部（任意嵌套层级）的 .b 元素。
常见错误现象：写成 .btn .primary 想给“主按钮”设样式，结果却把所有在 .btn 容器里的 .primary 文字、图标都染色了——这不是类名拼接，是结构穿透。
-
.container.bg-red→ 只作用于<div class="container bg-red"> -
.container .bg-red→ 会命中<div class="container"><span class="bg-red"></span></div>，哪怕中间隔了三层<div> - 顺序无关：
.bg-red.container和.container.bg-red效果一致
HTML 的 class 属性空格 ≠ CSS 选择器空格
HTML 中 class="a b" 的空格是分隔符，浏览器解析为两个独立类名 a 和 b；CSS 里 .a .b 的空格却是关系符，表示“在……里面找到”。二者语义完全不重叠，不能靠“看起来像”去推断。
容易被忽略的点：动态生成 class 字符串时（比如 JS 拼接或模板引擎），若误把 className = 'a' + ' ' + 'b' 当作“组合类”，其实只是给了元素两个类；但若 CSS 写成 .a .b，就完全匹配不上——因为没嵌套关系。
立即学习“前端免费学习笔记（深入）”；
- HTML：
<div class="a b">→ 元素同时属于.a和.b - CSS：
.a.b→ 才能精准选中这个元素 - CSS：
.a .b→ 会去找<div class="a"><div class="b"></div></div>这种结构
逗号分隔 , 是并集，不是空格的替代方案
想让多个不相关的选择器共用样式，必须用英文逗号，比如 .header, .footer, .sidebar；写成 .header .footer .sidebar 就变成“.sidebar 在 .footer 里，且 .footer 在 .header 里”，语义彻底跑偏。
构建工具（如 PostCSS、Webpack 的 CSS 提取插件）对空格更敏感：有些压缩器会删掉逗号前后的空格，但不会动选择器内部的空格——所以 .a,.b 安全，.a .b 却可能因缩进/换行被意外破坏结构。
- ✅ 正确并集：
.btn, .link, [data-action] - ❌ 错误并集：
.btn .link [data-action]（这是后代链） - ⚠️ 构建风险：
.nav a, .btn中若被压缩成.nava,.btn，nava就成了一个新类名，失效
空格选择器性能开销比 > 高
浏览器解析 .a .b 时，需对每个 .b 元素向上遍历祖先链，确认是否存在某个祖先匹配 .a；而 .a > .b 只查父节点，快得多。DOM 节点多、嵌套深时，这种差异在重绘阶段会显现。
真正难的不是记住规则，而是每次敲下空格前，得问自己一句：这个空格，是我真需要它“穿透任意层级”，还是只是手滑按出来的？尤其在封装组件时，.card .title 看似方便，但用户加一层 wrapper 就失效；换成 .card > .title 或直接用 .card-title 更可控。
