多个类同时生效需在HTML中用空格分隔，CSS中用连续点号连接类名构成复合类选择器；如<div class="btn primary large">对应.btn.primary.large{}，顺序无关，空格或逗号会改变语义。

多个类同时生效，直接在HTML元素的class属性中用空格隔开即可，对应CSS里用不带空格的点号连续写——这就是复合类选择器（也叫多类选择器）。

HTML中怎么写多个类

一个元素可以拥有多个类名，只要用空格分开：

<div class="btn primary large">确定</div>

这样btn、primary、large三个类就同时作用于这个<div>了。

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

CSS中怎么选中“同时拥有多个类”的元素

用连续的类选择器（中间不能有空格），表示“必须同时具备这几个类”：

立即学习“前端免费学习笔记（深入）”；

.btn.primary.large {
  background-color: #007bff;
  padding: 12px 24px;
  font-size: 16px;
}

这条规则只对同时含有btn、primary和large三个类的元素生效。顺序无关紧要，.primary.btn.large效果一样。

常见误区提醒

• 带空格是后代选择器：`.btn .primary` 表示“在 class 为 btn 的元素内部，找 class 为 primary 的子孙元素”，不是同一个元素。
• 类名之间不能有逗号：`.btn, .primary` 是“或”关系，匹配任意一个类，不是“同时拥有”。
• 不用加标签名也能精准定位：`.btn.primary` 比 `button.btn.primary` 更灵活，推荐优先用纯类组合。

实际使用小技巧

• 按职责拆分类名，比如card（结构）、shadow-md（样式）、rounded-lg（修饰），组合起来语义清晰又复用性强。
• 避免过度嵌套类组合，比如`.btn.primary.large.disabled.loading`——5个类一起用，维护成本高，可考虑用 JS 切换状态类更可控。
• 浏览器开发者工具里，元素上同时显示多个类名，样式面板会列出所有匹配的规则，方便调试是否命中了你的复合选择器。