HTML 的 class="container bg-red" 表示该元素同时拥有两个独立类名 container 和 bg-red；CSS 中通过 .container.bg-red（无空格）才能精准匹配这两个类共存于同一元素，而 .containerbg-red（连写）会被解析为一个名为 containerbg-red 的单一类，与实际 class 属性不符，因此不生效。
css 中类名里的空格，绝非普通字符，而是具有严格语义的**分隔符**——它只存在于 html 的 `class` 属性值中，用于划分多个独立类名；在 css 选择器中，空格则代表完全不同的关系（后代选择器）。理解这一区别，是写出可维护、无歧义样式规则的关键。
✅ 正确理解 HTML 中的 class 属性空格
当书写：
<div class="container bg-red"></div>
浏览器会将 class 属性解析为两个独立的类名：container 和 bg-red（注意：中间空格仅作分隔，不参与类名构成）。这意味着该元素同时“属于” .container 和 .bg-red 两个选择器所定义的样式集合。
因此，以下 CSS 规则均会生效：
.container { width: 100%; padding: 1rem; }
.bg-red { background-color: #e53e3e; color: white; }元素将叠加应用二者声明的所有属性（冲突属性按层叠规则决定最终值）。
立即学习“前端免费学习笔记（深入）”；
❌ 常见误区：混淆“空格分隔”与“连写类名”
- ✅ .container.bg-red → 链式选择器（也称交集选择器）：匹配同时拥有 container 和 bg-red 两个类的元素（顺序无关，.bg-red.container 效果相同）。
- ❌ .container bg-red → 后代选择器：匹配 .bg-red 元素，且该元素位于 .container 的任意嵌套后代位置（如 <div class="container"><span class="bg-red">…</span></div>）。
- ❌ .containerbg-red → 尝试匹配一个名为 containerbg-red 的单一类名，但 HTML 中并不存在该类，故规则永不生效。
? 验证技巧：在浏览器开发者工具的 Elements 面板中检查目标元素的 class 属性值，再对照 Computed 标签页中实际应用的样式来源，可快速定位是否因选择器误写导致样式失效。
? 特异性与最佳实践
链式选择器 .container.bg-red 的特异性为 0,0,2,0（两个类选择器，各贡献 10），高于单类选择器（0,0,1,0），但远低于 ID 选择器（0,1,0,0）或内联样式。合理利用链式写法可增强样式精准度，但需注意：
- 避免过度链式：如 .card.header.active.loading 虽语法合法，但耦合性强、可读性差；推荐用 BEM 命名（如 .card--loading）或原子化方案（如 Tailwind 的 class="card bg-red"）解耦。
- 动态类场景慎用：在 React/Vue 中若类名动态拼接（如 className={\container \${isRed ? 'bg-red' : ''}`}），应避免依赖.container.bg-red—— 当bg-red未渲染时，整条规则失效。更健壮的做法是基础样式用.container，状态样式单独定义.container.bg-red或.container--red`。
? 补充：类名中哪些字符“不算空格”？
- -（短横线）、_（下划线）、$、@ 等均为合法类名字符，name-new 是一个完整类名，不可被空格拆分；
- HTML 中的换行、制表符等空白字符，在 class 属性解析时等同于空格，均作为类名分隔符处理；
- 类名首尾及连续空格会被自动压缩（如 class=" container bg-red " 等价于 class="container bg-red"）。
掌握空格在 HTML class 属性与 CSS 选择器中的双重角色，能从根本上规避选择器失效、样式错配等高频问题，让 CSS 更加可控、可预测。
