CSS组合选择器教程：多种选择器联合使用
组合选择器通过联合多个基础选择器更精准定位元素。例如p.red表示同时是段落且有red类的元素；常见形式包括标签+类、标签+id、类+类，如p.highlight选中带highlight类的段落，.btn.primary选中同时含btn和primary类的按钮；使用时需注意顺序不影响匹配、不可加空格、优先级较高以及避免过度嵌套。
有时候你可能会遇到这样的情况：想对页面中某些特定的元素进行样式设置，但单独使用一个选择器又不够精确。这时候，CSS 的组合选择器就派上用场了。它可以通过多个选择器的联合使用，更精准地定位目标元素。
什么是组合选择器？
组合选择器就是把两个或多个基础选择器（比如类选择器、ID选择器、标签选择器等）写在一起，中间没有空格或其他符号分隔，表示同时满足这些条件的元素。
举个最简单的例子：
p.red {
color: red;
}
这段代码的意思是：选中所有既是
标签，又有 class="red" 的元素。也就是说，只有当某个段落同时拥有这两个特征时，才会被应用红色字体。
需要注意的是，组合选择器并不是多个选择器之间加逗号的那种“分组”方式，而是直接连写的形式。
常见的组合方式有哪些？
常见的组合选择器有以下几种形式，它们在实际开发中非常实用：
标签 + 类选择器
像前面提到的 p.red 就属于这种类型。它用于选中特定标签且具有某个类名的元素。
例如：
<p class="highlight">这个会被选中</p> <div class="highlight">这个不会被选中</div>
对应的 CSS：
p.highlight {
background-color: yellow;
}
这样就能只给段落中的高亮文本添加背景色，而不会影响其他标签。
标签 + ID选择器
虽然不常见，但也可以写成 div#main 这种形式。它表示选中指定标签并且具有特定 ID 的元素。
比如：
div#header {
padding: 20px;
}
这样只会作用于
，而不是所有 ID 为 header 的元素（比如可能是
类 + 类选择器
这是很常用的一种形式，比如 .btn.primary，意思是选中同时包含 btn 和 primary 这两个类的元素。
HTML 示例：
<button class="btn primary">提交</button> <button class="btn">取消</button>
CSS 写法：
.btn.primary {
background-color: blue;
}
这种方式可以很方便地实现 UI 组件的状态控制，比如按钮的不同样式。
使用组合选择器时要注意什么？
- 顺序不影响匹配：.a.b 和 .b.a 是一样的，只要元素同时有这两个类就行。
- 不要加空格：如果写成 .a .b，那就变成了后代选择器，不是组合选择器了。
- 优先级会提高：组合选择器的优先级比单一选择器更高，容易覆盖其他样式，调试时要注意。
- 避免过度嵌套：比如写成 div.p.box 这样的长组合，会让代码难以维护，也不太必要。
实际开发中的小技巧
- 如果你在使用组件库（比如 Bootstrap 或 Tailwind CSS），你会发现很多类名是通过组合使用的，比如 .btn.btn-primary，这就是组合选择器的实际应用场景。
- 在写样式的时候，如果你发现某个样式没生效，不妨检查一下是不是用了组合选择器导致优先级过高或者匹配不到。
基本上就这些。组合选择器看起来简单，但在实际项目里能帮你更精细地控制样式，值得花点时间掌握。
以上就是CSS组合选择器教程：多种选择器联合使用的详细内容，更多请关注昆居客【www.kunjuke.com】。