在HTML开发中，为一个元素同时应用多个CSS类名是最基础的样式组织手段。它允许我们把通用样式、布局样式和主题样式拆分成独立的类，再自由组合到具体标签上，从而避免重复书写相同的CSS规则。理解多类名的设置方式与生效机制，是写出可维护页面的前提。
一、HTML多类名的正确写法
HTML元素的class属性本身就是一个字符串，多个类名之间使用空格进行分隔，而不是逗号、点号或其他符号。浏览器在解析时会按照空白字符把这段字符串拆分成独立的类名，每一个类名都可以对应样式表中的一个.类名选择器。例如下面的代码就给一个div同时设置了box、red和center三个类。
<div class="box red center"> 这是一个拥有三个类名的容器 </div>
在CSS中，这三个类可以分别定义不同的职责。比如.box控制尺寸与边框，.red控制文字颜色，.center控制内部内容居中。这种拆分方式让样式像积木一样可拼装。要注意的是，类名本身不能包含空格，因为空格在class属性里是分隔符；如果确实需要语义化的长名称，推荐使用英文连字符，例如main-box。
有些初学者会误写成class="box,red"或者class="box.red"，这两种写法都是错误的。逗号写法会让浏览器把box,red当成一个完整的类名，而样式表中并没有定义这个类，因此样式完全失效；点号写法同理。只有通过空格分隔，多类名才能被正确识别。
二、多类名的CSS定义与组合选择
在样式表中，多个类名既可以单独定义，也可以组合定义以实现更精确的控制。单独定义时，每个类相互独立，元素只要带有该类就会生效。组合定义则是把两个或多个类名连写，中间不加空格，表示“同时拥有这些类的元素”才会匹配。
/* 单独定义 */
.box {
width: 200px;
border: 1px solid #ccc;
}
.red {
color: #f00;
}
.center {
text-align: center;
}
/* 组合定义：只有同时有box和red的元素才生效 */
.box.red {
background-color: #ffecec;
}
上面的.box.red选择器权重高于单独的.box或.red，因此当元素同时拥有这两个类时，背景色规则会更具优先级。利用这种组合写法，我们可以在不增加额外HTML结构的情况下，针对某些特定组合微调样式，非常适合做状态样式叠加，例如btn btn-disabled。
需要区分的是，.box.red与.box .red完全不同。前者是同一个元素的多类组合，后者表示.red是.box后代元素，中间有空格代表层级关系。写错空格位置是多类名使用中的高频错误，会导致选择器完全不匹配预期元素。
三、多类名的优先级与覆盖规则
当多个类名中对同一CSS属性做了声明，浏览器会依据优先级规则决定最终渲染值。优先级的基础顺序是：内联样式高于ID选择器，ID选择器高于类选择器，类选择器高于标签选择器。对于多个类选择器而言，如果权重相同，那么定义在样式表中靠后的规则会覆盖靠前的规则。
| 选择器示例 | 权重说明 | 应用场景 |
|---|---|---|
| .red | 单个类，权重(0,0,1,0) | 基础颜色类 |
| .box.red | 两个类，权重(0,0,2,0) | 特定组合微调 |
| #main .red | ID加类，权重(0,1,1,0) | 局部作用域强约束 |
假设我们有以下样式，元素class="red blue"且两个类都设置了color：
.red {
color: red;
}
.blue {
color: blue;
}
由于.blue在样式表中后出现，且权重与.red相同，最终文字颜色为蓝色。如果想让红色强制生效，可以提高权重，例如写成div.red或者调整样式顺序。理解这一点能有效减少“样式不生效”的调试时间。在大型项目中，推荐用命名空间前缀配合多类名，降低不同模块间的样式冲突。
四、多类名在组件化中的实践
现代前端开发常把UI拆成组件，多类名正是实现组件样式扩展的轻量方案。以按钮为例，基础类btn定义通用结构，修饰类btn-primary、btn-sm负责外观变体，业务层只需组合类名即可。
<button class="btn btn-primary btn-sm">小号主按钮</button> <button class="btn btn-default">默认按钮</button>
这种写法比每次都写新的CSS规则更利于复用，也方便JavaScript动态增删类名来切换状态，例如给输入框添加is-error类显示报错样式。动态操作类名的API如classList.add和classList.remove都基于多类名机制，它们会自动维护空格分隔的格式，不会破坏原有类列表。
总结来说，HTML多类名通过空格分隔写入class属性，CSS侧既可单类定义也能组合匹配，优先级按权重与声明顺序生效。掌握这些细节，就能用简单的类名组合构建出灵活、易维护的页面样式体系。