应使用复合选择器实现多条件同时满足的样式应用：如.btn.primary表示同时具备btn和primary类；button.submit:hover需同时满足button标签、submit类及hover状态；button[type="submit"]:disabled则要求button元素、type属性为submit且处于disabled状态。
当需要多个条件同时满足时才应用某段 CSS 样式，应使用复合选择器（也称多重选择器），即把多个简单选择器连写在一起，中间不加空格。这种写法表示“同时具备这些特征”的元素才会被选中。
一、类名 + 类名：同时拥有多个 class
例如，一个元素同时有 btn 和 primary 两个 class：
<button class="btn primary">确定</button>
对应的 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 控制
