复合类选择器通过连续书写多个带点的class名（如.btn.primary.large）来选中同时拥有这些class的元素，中间不加空格，顺序无关；常见错误包括使用空格（后代选择器）或逗号（分组选择器）；适用于状态组合样式控制，如.menu-item.active.highlight，能精准匹配且提升代码可读性，但应避免过度嵌套影响维护。
CSS选择器当然能选中同时拥有多个class的元素，关键在于正确使用复合类选择器（又称多类选择器）的写法。很多人误以为用空格或逗号连接多个class就能实现，其实不然。下面详细说明如何准确选中具有多个class的元素。
什么是复合类选择器？
复合类选择器是指在一个选择器中连续写多个class名称，中间不加空格，每个class前都带点（.）。它匹配的是同时拥有这些class的元素。
例如，一个元素有 class="btn primary large"，要选中它，可以这样写：
.btn.primary.large { /* 样式 */ }这个选择器只会作用于同时包含 btn、primary 和 large 三个class的元素，顺序无关。
立即学习“前端免费学习笔记（深入）”；
常见错误写法对比
初学者常混淆以下几种写法，导致样式无法生效：
- .btn .primary —— 这是后代选择器，表示“class为primary的元素，且位于class为btn的元素内部”
- .btn, .primary —— 这是分组选择器，表示“选中class为btn的元素 或 class为primary的元素”
- .btn primary —— 这是标签选择器组合，表示“名为primary的HTML标签在btn类内部”，通常无效
实际应用场景
复合类选择器特别适合用于状态样式或组合样式控制。比如：
.menu-item.active.highlight { color: red; font-weight: bold; }
只有当菜单项同时具备 active 和 highlight 类时，才会应用红色粗体样式。这种写法避免了额外创建新class，提升代码可读性。
再比如按钮变体：
.btn.success.disabled { opacity: 0.5; cursor: not-allowed; }表示“成功按钮在禁用状态下”的特殊样式。
注意事项
使用复合类选择器时需注意：
- 多个class必须都在同一个元素上，不能跨级
- class顺序不影响匹配，.a.b 和 .b.a 效果相同
- 性能上与普通class选择器无差异，可放心使用
- 避免过度嵌套，如连续写五六个class会降低可维护性
基本上就这些。掌握复合类选择器，能让你更精准地控制样式作用范围，减少不必要的HTML类名膨胀。不复杂但容易忽略细节。
