为HTML元素同时应用多个CSS样式规则，需在class属性中用空格分隔多个类名；也可通过JavaScript动态添加、模板字符串拼接、CSS自定义属性或工具库如clsx实现。
如果您希望为HTML元素同时应用多个CSS样式规则，则需要在元素的class属性中指定多个类名。以下是实现此目标的具体方法：
一、在class属性中用空格分隔多个类名
HTML规范允许在class属性中通过空格分隔多个类名，浏览器会将这些类名全部解析并应用对应的所有CSS规则。该方式是标准且最常用的方法。
1、在HTML标签的class属性中输入多个类名。
2、确保每个类名之间仅使用一个英文空格分隔，不支持中文空格或制表符。
立即学习“前端免费学习笔记（深入）”；
3、类名顺序不影响样式优先级，但后续定义的同名CSS属性会覆盖前面的定义（遵循层叠规则）。
二、使用JavaScript动态添加多个类名
通过DOM操作，可在运行时为元素添加多个类名，适用于交互逻辑中需按条件启用不同样式的场景。
1、使用element.className赋值，以空格拼接多个类名字符串。
2、使用element.classList.add()方法，依次传入多个类名参数。
3、使用element.setAttribute('class', 'class1 class2 class3')直接设置完整class值。
三、通过模板字符串或变量组合多个类名
在现代前端开发中，常借助JavaScript模板字符串或条件拼接生成动态class列表，尤其适用于组件化结构中类名需根据状态变化的场景。
1、声明包含基础类名和条件类名的字符串变量。
2、使用模板字符串拼接：`class="${base} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}"`。
3、将拼接结果插入HTML字符串或通过innerHTML设置到元素上。
四、使用CSS自定义属性配合单一类名控制多态样式
当多个视觉状态由同一组设计变量驱动时，可仅使用一个类名，再通过CSS自定义属性传递状态标识，避免class列表过长。
1、为元素设置单一类名，例如class="button"。
2、在该类名的CSS规则中，使用--state: active等自定义属性标记状态。
3、利用CSS属性选择器或@supports配合var()实现样式分支，如[style*="--state: active"]。
五、使用工具库提供的类名拼接函数
在React、Vue等框架生态中，常引入classnames、clsx等轻量工具函数，安全地合并条件类名，防止空字符串或布尔值导致无效class值。
1、安装并导入clsx模块：import clsx from 'clsx'。
2、调用clsx()传入字符串、对象、数组等多种类型参数。
3、将返回值作为className属性值：className={clsx('btn', { 'btn-primary': isPrimary })}。
