本文讲解如何使用 css 中无空格的多类选择器（如 `.classa.classb.classc`）精准匹配同时拥有多个指定类名的元素，从而实现仅显示特定组合、隐藏其他类似结构的目标。
在实际开发中，尤其是对接第三方 HTML 结构时，我们常需在不修改 DOM 的前提下，仅靠 CSS 控制元素显隐。关键在于准确理解 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>
目标是仅显示第一个 <div>（三类共存），隐藏后两个（缺少 classA）。此时应采用「交集选择器」逻辑，而非后代选择器：
✅ 正确写法（推荐）：
立即学习“前端免费学习笔记（深入）”；
/* 仅匹配同时含 classA、classB、classC 的元素 */
.classA.classB.classC {
display: block; /* 或 inline / inline-block，按需设置 */
}
/* 隐藏所有含 classB 和 classC（但不含 classA）的元素 */
.classB.classC {
display: none;
}
/* 隐藏所有仅含 classC 的元素（兜底，确保 C_no_display 也被隐藏） */
.classC {
display: none;
}⚠️ 注意事项：
- 类名顺序不影响选择器匹配（.classB.classA.classC 与 .classA.classB.classC 效果相同），但建议保持与 HTML 中一致，提升可读性；
- !important 通常非必需；若第三方样式已用 !important 覆盖，才需谨慎添加，否则会降低可维护性；
- 上述规则依赖「类名组合唯一性」——即确保 .classB.classC 不会意外命中其他需要显示的元素；若存在冲突，可升级为更具体的选择器（如 div.classB.classC 或添加属性限制 div[class~="classB"][class~="classC"]）；
- 若后续 HTML 可能动态增删类名，建议配合 JavaScript 检测类名完整性，CSS 方案作为静态兜底。
总结：CSS 多类选择器通过紧连书写（无空格）实现“与”逻辑，是精准控制复合类名元素显示状态的核心技巧。合理组合交集与兜底规则，即可在零侵入 DOM 的前提下，达成高度可控的样式隔离效果。
