如何选择拥有两个类的元素？实现差异化CSS样式设置

嘿，这个需求很典型，我来给你一步步说明怎么实现：

首先，要精准选中**同时拥有class1和class2**的那个div，关键是把两个类选择器直接连在一起写（中间不要加空格！空格是后代选择器的语法，这里我们要的是同一个元素上的多类组合）。

然后针对两种情况写CSS规则就好，代码示例如下：

<!-- 你的原始HTML结构 -->
<div class="class1 class2"></div>
<div class="class1"></div>

/* 选中同时包含class1和class2的元素 */
.class1.class2 {
  background-color: #ff6b6b;
  padding: 12px;
  border-radius: 4px;
}

/* 选中仅包含class1的元素 */
.class1 {
  background-color: #4ecdc4;
  padding: 12px;
  border-radius: 4px;
}

这里要注意优先级：.class1.class2的选择器优先级比单独的.class1更高，所以即使两个规则的属性有重叠，前者的样式会优先生效，不用怕被覆盖。如果调整规则顺序也没问题，但保持这个写法逻辑会更清晰。

这样设置后，第一个带两个类的div会显示珊瑚红色背景，第二个只有class1的div会显示青绿色背景，就能完美区分开两种元素的样式啦！

内容的提问来源于stack exchange，提问作者Santhosh Acharya