本文详解如何使用css中无空格的多类选择器（如 `.classa.classb.classc`）精确匹配同时拥有多个指定类的元素，实现仅显示特定类组合元素、隐藏其他含子集类名元素的效果。
在实际前端开发中，尤其是处理第三方HTML时，常需基于精确的类名组合而非单个类或层级关系来控制元素显隐。关键在于理解CSS选择器中类名间有无空格的本质区别：
- .classA.classB.classC（无空格）：匹配同时拥有 classA、classB 和 classC 三个类的单个元素（即类名并集）；
- .classA .classB .classC（有空格）：匹配嵌套结构——.classA 内部的 .classB 元素，其内部再包含 .classC 元素（即后代选择器，与目标场景无关）。
针对如下HTML结构：
<div class="classA classB classC">A_display</div> <div class="classB classC">B_no_display</div> <div class="classC">C_no_display</div>
我们希望仅显示第一行（三类共存），而隐藏后两行（仅含 classB classC 或仅 classC）。正确CSS写法如下：
/* ✅ 精确匹配同时具有 classA、classB、classC 的元素 */
.classA.classB.classC {
display: block; /* 或 inline/inline-block，按需设置 */
}
/* ❌ 错误：.classB .classC 会匹配后代，非目标元素 */
/* ✅ 正确：隐藏所有同时含 classB 和 classC（但不含 classA）的元素 */
.classB.classC {
display: none;
}
/* ✅ 隐藏所有仅含 classC（或含 classC 但不满足前述组合）的元素 */
.classC {
display: none;
}⚠️ 重要注意事项：
立即学习“前端免费学习笔记（深入）”；
- CSS规则的声明顺序影响最终效果：由于 .classC { display: none } 会全局生效，必须确保更具体的组合规则（如 .classA.classB.classC）位于其后，才能通过层叠优先级覆盖隐藏行为；
- 若存在其他含 classC 但需保留显示的元素，应避免全局 .classC { display: none }，改用更精确的排除逻辑，例如：
/* 仅隐藏不含 classA 的 classB.classC 元素 */ .classB.classC:not(.classA) { display: none; } .classC:not(.classA):not(.classB) { display: none; } - !important 通常非必需；合理利用选择器特异性（specificity）即可——.classA.classB.classC 的特异性（3×10 = 30）高于 .classC（10），天然具备覆盖能力。
综上，核心技巧是：用无空格连写类名表示“与”关系，结合层叠顺序与特异性，实现基于类组合的精准样式控制。此方法无需JavaScript，轻量高效，特别适用于受限环境下的HTML微调。
