在CSS样式编写过程中，我们经常需要给同一类元素中的部分特殊元素单独设置样式，这时候多类组合选择器就能发挥很好的作用，其中_.class1.class2的写法就是典型的多类组合形式。
多类组合选择器的基础语法
多类组合选择器的写法是把多个类选择器直接拼接在一起，不需要任何分隔符，格式为.类名1.类名2.类名3，这里的类名顺序不影响匹配结果。它的匹配规则是：同时拥有所有指定类名的元素才会被选中，缺少其中任意一个类名的元素都不会被匹配。
比如我们有如下HTML结构：
<div class="box red">同时有box和red类的元素</div> <div class="box">只有box类的元素</div> <div class="red">只有red类的元素</div> <div class="box red large">同时有box、red、large类的元素</div>
使用.box.red选择器时，只会匹配第一个和第四个div元素，第二个只有box类、第三个只有red类的元素都不会被选中。
多类组合选择器和相关选择器的区别
和单独类选择器的区别
单独的类选择器.box会选中所有包含box类的元素，而.box.red只选中同时包含box和red类的元素，前者的匹配范围更大。
和后代选择器的区别
很多开发者会混淆.box.red和.box .red，前者是同时拥有两个类的同一个元素，后者是选中box类元素内部的red类后代元素，二者匹配的元素完全不同。
我们可以通过下面的代码示例直观看到差异：
/* 多类组合选择器：选中同时有box和red类的元素 */
.box.red {
background-color: #ff0000;
color: #ffffff;
}
/* 后代选择器：选中box类元素内部的red类元素 */
.box .red {
background-color: #00ff00;
color: #000000;
}
实际应用场景示例
多类组合选择器常用于给基础样式类添加变体样式，比如我们定义了一个基础按钮类.btn，再定义不同主题的按钮类.primary、.danger，就可以通过组合选择器给不同组合的按钮设置样式。
/* 基础按钮样式 */
.btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
/* 主要按钮变体 */
.btn.primary {
background-color: #1677ff;
color: #ffffff;
}
/* 危险按钮变体 */
.btn.danger {
background-color: #ff4d4f;
color: #ffffff;
}
/* 同时有大尺寸类和主要类的按钮 */
.btn.large.primary {
padding: 12px 24px;
font-size: 16px;
}
对应的HTML使用方式如下：
<button class="btn primary">主要按钮</button> <button class="btn danger">危险按钮</button> <button class="btn large primary">大尺寸主要按钮</button>
常见使用误区
- 误区一：认为类名顺序会影响匹配。实际上
.box.red和.red.box是完全等价的，匹配结果没有任何区别。 - 误区二：在选择器类名之间加空格。加了空格就会变成后代选择器，匹配逻辑完全改变，这是最常见的语法错误。
- 误区三：认为多类组合选择器只能选两个类。实际上可以拼接任意多个类名，比如
.a.b.c.d是合法的，会匹配同时拥有a、b、c、d四个类的元素。
优先级说明
多类组合选择器的优先级计算遵循CSS优先级规则，一个类选择器的优先级是10，那么.box.red的优先级就是10+10=20，比单个类选择器的优先级更高，所以当样式冲突时，多类组合选择器的样式会覆盖单个类选择器的样式。
我们可以通过下面的例子验证：
.box {
color: #333333;
}
.box.red {
color: #ff0000;
}
对于同时有box和red类的元素，最终文字颜色会是红色，因为.box.red的优先级更高。
CSS多类组合选择器class1_class2样式应用修改时间：2026-06-27 13:45:15