CSS 将 class="container bg-red" 中的空格视为多个独立类名的分隔符，而非类名的一部分；因此 .container.bg-red 表示同时拥有这两个类的元素，而 .containerbg-red 是一个完全不同的、未定义的单一类名。
css 将 `class="container bg-red"` 中的空格视为**多个独立类名的分隔符**，而非类名的一部分；因此 `.container.bg-red` 表示同时拥有这两个类的元素，而 `.containerbg-red` 是一个完全不同的、未定义的单一类名。
在 HTML 中，class 属性值是一个以空格分隔的类名列表（whitespace-separated list of tokens），这是 W3C 规范明确定义的行为（参见 CSS Selectors Level 4）。例如：
<div class="container bg-red highlight">Hello World</div>
该 <div> 实际拥有三个独立的类：container、bg-red 和 highlight。浏览器在匹配类选择器时，会将每个空格分隔的词单独对待，不拼接、不连写、不忽略。
✅ 正确写法：组合类选择器（Compound Selector）
若要选中同时具备 container 和 bg-red 两个类的元素，必须使用无空格的点号链式写法：
.container.bg-red {
background-color: red;
padding: 1rem;
}此选择器表示“同时具有 container 类 且 具有 bg-red 类”的元素（顺序无关，.bg-red.container 效果相同）。这是 CSS 中的标准类组合选择器（compound class selector），属于简单选择器的组合形式。
立即学习“前端免费学习笔记（深入）”；
❌ 常见误解辨析
| 写法 | 含义 | 是否匹配 <div class="container bg-red"> | 原因 |
|---|---|---|---|
| .container | 仅含 container 类的元素 | ✅ 是 | 单独匹配第一个类 |
| .bg-red | 仅含 bg-red 类的元素 | ✅ 是 | 单独匹配第二个类 |
| .container.bg-red | 同时含两个类的元素 | ✅ 是 | 组合选择器，逻辑为 AND |
| .containerbg-red | 类名为 containerbg-red 的元素 | ❌ 否 | 实际 class 中不存在该字符串 |
| .container bg-red | bg-red 元素位于 .container 的后代中 | ❌ 否（除非嵌套） | 此为后代选择器，含空格，语义完全不同 |
⚠️ 特别注意：.container bg-red（带空格）是后代选择器，它匹配的是「任意 bg-red 类元素，且其祖先中存在 .container 元素」，而非同一元素上的多类匹配。
? 技术依据与规范佐证
“The class selector matches elements whose class attribute contains the specified class name as one of a whitespace-separated list of tokens.”
即：class 属性被解析为 token 列表，选择器 .A.B 要求该元素的 token 列表同时包含 A 和 B —— 这是集合交集关系，而非字符串匹配。
这也解释了为何 [class$="bg-red"] 在多类场景下失效：class="container bg-red" 的属性值字符串以 "bg-red" 结尾仅当它是最后一个类且后无空格；但实际末尾可能是 "bg-red "（含空格）或 "bg-red highlight"，故推荐使用 [class*="bg-red"] 或更健壮的 :is(.bg-red)（现代语法）进行模式匹配。
✅ 最佳实践建议
- 命名清晰：避免连字符歧义（如 bg-red vs bgred），可采用 BEM 风格（btn--primary）提升可读性；
- 组合优先：多类控制样式时，用 .class1.class2 显式表达依赖，增强可维护性；
- JS 操作同步：通过 element.classList.add('bg-red') 动态添加类时，同样遵循空格分隔规则，无需拼接字符串。
掌握类名空格的本质，是写出可预测、可复用、易调试 CSS 的关键基础。
