CSS多类组合选择器是前端样式开发中常用的选择器类型，它通过同时匹配元素携带的多个类名，实现对特定元素的精准样式控制，能够有效减少冗余代码，提升样式规则的可维护性。
多类组合选择器的基本语法
多类组合选择器的写法是将多个类名直接连接，中间不使用任何分隔符，每个类名前都需要添加英文句点.作为类选择器的标识。它的匹配规则是：目标元素必须同时包含选择器中列出的所有类名，才会应用对应的样式规则。
基础语法格式如下：
/* 同时包含class1和class2的元素才会匹配 */
.class1.class2 {
样式属性: 属性值;
}
基础使用示例
首先我们定义几个包含不同类名的HTML元素，然后通过多类组合选择器控制它们的样式：
<div class="box">普通盒子</div> <div class="box active">激活状态的盒子</div> <div class="box active disabled">激活且禁用的盒子</div>
接下来编写对应的CSS样式：
/* 所有box类的元素基础样式 */
.box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
}
/* 同时包含box和active类的元素样式 */
.box.active {
background-color: #e6f7ff;
border-color: #1890ff;
}
/* 同时包含box、active、disabled三个类的元素样式 */
.box.active.disabled {
opacity: 0.5;
cursor: not-allowed;
}
上述代码中，第一个div仅匹配.box规则，第二个div同时匹配.box和.box.active规则，第三个div则匹配所有三个规则，最终样式会按照CSS优先级叠加生效。
使用注意事项
- 多类组合选择器中，类名的顺序不影响匹配结果，
.class1.class2和.class2.class1匹配的是同一批元素。 - 如果元素缺少组合选择器中的任意一个类名，都不会被匹配到，比如仅包含
class1的元素不会匹配.class1.class2规则。 - 多类组合选择器的优先级高于单个类选择器，当有样式冲突时，组合选择器的规则会优先生效。
- 类名之间不要添加空格，添加空格后会变成后代选择器，匹配的是包含对应类名的后代元素，而非同时携带多个类名的同一个元素。
复杂场景下的应用
在多状态组件、主题切换等复杂场景中，多类组合选择器能发挥更大的作用。比如我们实现一个支持不同尺寸、不同状态、不同主题的按钮组件：
<button class="btn small primary">小号主色按钮</button> <button class="btn large success disabled">大号成功色禁用按钮</button> <button class="btn default warning">默认警告按钮</button>
对应的CSS样式如下：
/* 按钮基础样式 */
.btn {
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
padding: 8px 16px;
}
/* 尺寸相关样式 */
.btn.small {
padding: 4px 8px;
font-size: 12px;
}
.btn.large {
padding: 12px 24px;
font-size: 16px;
}
/* 主题色相关样式 */
.btn.primary {
background-color: #1890ff;
color: #fff;
}
.btn.success {
background-color: #52c41a;
color: #fff;
}
.btn.warning {
background-color: #faad14;
color: #fff;
}
.btn.default {
background-color: #f5f5f5;
color: #333;
}
/* 状态相关样式 */
.btn.disabled {
opacity: 0.6;
cursor: not-allowed;
}
通过这种方式，我们不需要为每个按钮组合单独编写样式类，只需要通过组合不同的类名，就能实现各种按钮样式的灵活控制，大幅减少了CSS代码量，也方便后续扩展新的尺寸、主题或状态。
优先级说明
多类组合选择器的优先级计算遵循CSS优先级规则，一个类选择器的优先级权重为10，多类组合选择器的权重是单个类选择器权重的总和。比如.box.active的优先级是20，高于单个.box的10，因此当两者设置同一属性冲突时，组合选择器的样式会生效。
我们可以通过下面的示例验证优先级规则：
<div class="test demo">测试优先级</div>
.test {
color: red;
}
.test.demo {
color: blue;
}
最终该div的文字颜色会显示为蓝色，因为.test.demo的优先级更高。