17370845950

应使用复合选择器实现多条件同时满足的样式应用：如.btn.primary表示同时具备btn和primary类；button.submit:hover需同时满足button标签、submit类及hover状态；button[type="submit"]:disabled则要求button元素、type属性为submit且处于disabled状态。

当需要多个条件同时满足时才应用某段 CSS 样式，应使用复合选择器（也称多重选择器），即把多个简单选择器连写在一起，中间不加空格。这种写法表示“同时具备这些特征”的元素才会被选中。

一、类名 + 类名：同时拥有多个 class

例如，一个元素同时有 btn 和 primary 两个 class：

确定

对应的 CSS 写法是：

.btn.primary {
  background-color: #007bff;
  color: white;
}

注意：.btn.primary 中间没有空格，表示“同时具有 btn 和 primary 这两个 class”；如果写成 .btn .primary（带空格），就变成后代选择器，含义完全不同。

二、标签 + 类名 + 伪类：多维度精确限定

比如只想给「按钮中带有 .submit 类、且处于 hover 状态」的元素加样式：

button.submit:hover {
  opacity: 0.8;
  transform: scale(1.02);
}

这表示必须同时满足三个条件：是 button 标签、有 submit 类、鼠标悬停中。

三、属性选择器 + 伪类 + 状态：更精细的控制

例如，只对「type 为 submit 的 disabled 按钮」设置灰阶样式：

button[type="submit"]:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

这里组合了：button 元素、type 属性值等于 submit、处于 disabled 状态 —— 三者缺一不可。

四、注意事项与常见错误

• 多个选择器连写时，顺序一般不影响匹配结果，但建议按“宽泛→具体”排列（如 div.card.active 比 .active.card.div 更易读）
• 不要在复合选择器中误加空格，否则语义变成“后代”或“子元素”
• ID 选择器也可以参与组合，如 #header.nav.fixed 表示 ID 是 header、同时有 nav 和 fixed 类的元素
• 过度嵌套（如 section article div p em.highlight）会降低可维护性，优先考虑用语义化 class 控制