本文讲解如何使用 css 中无空格的多类选择器（如 `.classa.classb.classc`）精准匹配同时拥有多个类的元素，从而实现仅显示特定组合、隐藏其他含子集类名的元素。
在实际开发中，尤其是处理第三方 html 时，我们常需基于已知且稳定的 class 组合进行样式控制。例如，给定以下结构：
A_display B_no_display C_no_display目标是：仅显示第一个
（即同时拥有 classA、classB 和 classC 的元素），而隐藏后两个。
- .classA .classB .classC（带空格）：表示后代选择器，匹配 .classC 元素，且其祖先链中依次存在 .classA 和 .classB 的祖先元素；
- .classA.classB.classC（无空格）：表示同一元素同时拥有这三个类名，是精确的“多类并存”匹配。
因此，正确写法如下：
立即学习“前端免费学习笔记（深入）”；
/* 精确匹配同时含有 classA、classB、classC 的元素 */ .classA.classB.classC { display: block; /* 或 inline / flex 等，按需设置 */ } /* 隐藏仅含 classB 和 classC（不含 classA）的元素 */ .classB.classC { display: none; } /* 隐藏仅含 classC 的元素（兜底，避免遗漏） */ .classC { display: none; }⚠️ 注意事项：
- 类选择器顺序无关紧要（.classB.classA.classC 效果等同），但建议按 HTML 中出现顺序书写以提升可读性；
- .classB.classC 会匹配所有同时含这两个类的元素（包括 .classA.classB.classC），因此必须将更具体的规则（.classA.classB.classC）写在前面，否则会被后续 display: none 覆盖；
- 若需强制生效，可酌情添加 !important，但应优先通过选择器特异性（specificity）控制优先级，而非滥用 !important；
- 此方案不依赖 javaScript，纯 CSS 实现，性能高、语义清晰，适用于静态或 SSR 场景。
最终页面将仅渲染：
A_display其余元素被有效隐藏，达成预期效果。