在CSS样式编写过程中，多类组合选择器是一种能够同时匹配多个类名的元素的选择器，它可以让我们更精准地控制特定元素的样式，避免编写冗余的CSS代码，提升样式的复用性和维护性。
多类组合选择器的基本语法
多类组合选择器的写法是将多个类名直接拼接在一起，中间不使用任何分隔符，每个类名前面都需要加上英文点号.。它的核心逻辑是：只有当元素同时包含所有的指定类名时，该选择器才会生效。
基础语法格式如下：
/* 同时包含class1和class2的元素才会匹配 */
.class1.class2 {
属性名: 属性值;
}
匹配规则说明
需要特别注意，多类组合选择器和后代选择器、群组选择器有本质区别：
- 多类组合选择器：元素必须同时拥有所有拼接的类名，类名顺序不影响匹配结果。
- 后代选择器：写法是
.class1 .class2，中间有空格，匹配的是class为class1的元素内部的class为class2的后代元素。 - 群组选择器：写法是
.class1, .class2，中间有逗号，匹配的是所有class为class1或者class为class2的元素。
正确匹配示例
假设HTML结构如下：
<div class="box active">内容1</div> <div class="box">内容2</div> <div class="active">内容3</div>
对应的CSS多类组合选择器：
/* 只有第一个div会匹配到这个样式 */
.box.active {
color: red;
font-size: 16px;
}
这里第二个div只有box类，第三个div只有active类，都不满足同时拥有两个类名的条件，所以不会应用该样式。
优先级计算
多类组合选择器的优先级遵循CSS优先级的计算规则，每个类选择器贡献的优先级权重是10，多类组合选择器的优先级是各个类名权重的总和。
| 选择器类型 | 优先级权重 |
|---|---|
单类选择器.box | 10 |
多类组合选择器.box.active | 20 |
ID选择器#id | 100 |
内联样式style="" | 1000 |
因此当多类组合选择器和单类选择器同时作用于同一个元素时，多类组合选择器的样式会优先生效，前提是其他优先级条件一致。
实际应用场景
场景1：复用基础样式并添加特殊样式
我们可以先定义基础样式类，再通过多类组合给特定元素添加额外样式，避免重复编写基础样式。
/* 基础按钮样式 */
.btn {
padding: 8px 16px;
border-radius: 4px;
border: none;
cursor: pointer;
}
/* 主要按钮的特殊样式，同时拥有btn和primary类的元素生效 */
.btn.primary {
background-color: #409eff;
color: white;
}
/* 危险按钮的特殊样式 */
.btn.danger {
background-color: #f56c6c;
color: white;
}
对应的HTML使用：
<button class="btn">普通按钮</button> <button class="btn primary">主要按钮</button> <button class="btn danger">危险按钮</button>
场景2：精准匹配特定状态的元素
当元素有多个状态类时，可以用多类组合选择器匹配同时处于多个状态的元素。
/* 同时处于激活和禁用状态的输入框样式 */
.input.active.disabled {
background-color: #f5f5f5;
color: #999;
}
注意事项
- 类名拼接时不要添加空格，否则会变成后代选择器，导致匹配逻辑错误。
- 类名顺序不影响匹配结果，
.box.active和.active.box匹配的是同一批元素。 - 如果元素同时被多个多类组合选择器匹配，优先级高的生效，优先级相同则后定义的样式覆盖先定义的。
多类组合选择器是CSS选择器中比较实用的一种，合理使用可以减少CSS代码量，提升样式的可维护性，建议在项目样式编写中根据实际需求灵活应用。