结论：.class1.class2 表示交集选择器，精准匹配同时拥有 class1 和 class2 两个类的单个元素；中间无空格，不依赖顺序，现代浏览器全支持，IE6 只认最后一个类。
直接说结论：.class1.class2 这种写法能实现多状态交集筛选，但必须确认目标元素同时拥有这两个类名，且浏览器支持——现代浏览器全支持，IE6 及更早版本会忽略前面的类、只认最后一个。
为什么 .class1.class2 能匹配“既 A 又 B”的元素
它不是“在 .class1 里找 .class2”，而是“找同时带 class1 和 class2 的单个元素”。DOM 中一个元素的 class 属性值是空格分隔的字符串，CSS 引擎会检查该字符串是否**同时包含**两个类名子串（不区分顺序）。
常见错误现象：
- 写成
.class1 .class2（中间有空格）→ 变成后代选择器，语义完全不同 - HTML 中写成
class="class1, class2"（加了逗号或引号内带标点）→ 实际只生成一个类名，如"class1," - 动态添加类时漏掉空格，例如
el.className += "class2"→ 结果变成class1class2，不是两个独立类
div.class1.class2 和 .class1.class2 的区别在哪
前者要求元素**必须是 div 标签**，且同时有 class1 和 class2；后者对标签类型无限制，只要具备这两个类即可。实际项目中，后者更常用，也更灵活。
使用场景举例：
- 按钮禁用态 + 加载中态：
.btn.disabled.loading→ 同时应用disabled和loading类的button元素 - 表单验证错误 + 聚焦态：
.input.error:focus→ 错误且当前获得焦点的输入框（注意：:focus是伪类，不是类名） - 卡片组件的尺寸 + 主题组合：
.card.large.dark→ 不依赖嵌套结构，靠纯类名组合控制样式变体
IE6 兼容问题怎么绕过
IE6 把 .first.current 解析成 .current，所以交集失效。如果你仍需支持 IE6（极少见），只能改用标签前缀方案，例如：li.first.current → IE6 会识别为 li 标签下的 .current，但前提是 first 和 current 确实都在同一个 li 上，且你愿意放弃纯类名组合的灵活性。
更现实的做法是：
- 确认项目真实兼容要求：现在绝大多数项目已不考虑 IE6
- 若必须兼容，用 JavaScript 补丁判断类名是否存在，再手动加 style 或切换 class
- 避免依赖多类交集控制关键 UI 状态，改用单一语义类名（如
.tab-active-first）
真正容易被忽略的是：交集选择器不解决“状态叠加优先级”问题。比如 .btn.primary.large 和 .btn.large.primary 效果完全一样，但一旦其中某条规则用了 !important 或来自更高权重来源（如内联 style），交集本身不改变层叠顺序。交集只是缩小匹配范围，不提升 CSS 权重。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
