组合选择器用于选择同时符合多个条件的元素。它通过组合符连接多个简单选择器，包括：空格（选择任意后代）、子级选择器（选择直接子级）、相邻选择器（选择紧跟之后的元素）、通用相邻选择器（选择紧跟之后的兄弟元素）。使用时，组合符的优先级从右到左递减，更具体的组合选择器优先级更高。
CSS 组合选择器详解
什么是组合选择器？
组合选择器是一种用于选择同时符合多个条件的元素的 CSS 选择器。它使用不同的组合符来连接多个简单选择器。
组合符
立即学习“前端免费学习笔记（深入）”；
CSS 组合选择器使用以下组合符：
- 空格 ( )：选择父级和子级的任意后代元素。
- > (子级选择器)：选择直接的子级元素。
- + (相邻选择器)：选择紧跟在之前的元素之后的元素。
- ~ (通用相邻选择器)：选择紧跟在之前的元素之后的所有兄弟元素。
使用案例
下面是一些组合选择器的使用案例：
-
div p：选择所有嵌套在div元素内的p元素。 -
li > a：选择所有li列表项中的直接链接。 -
h2 + p：选择所有紧跟在h2标题之后的段落。 -
input ~ label：选择所有紧跟在输入字段之后的标签。
优先级
当使用组合选择器时，其优先级遵循以下规则：
- 从右到左：组合符的优先级从右到左递减。
- 覆盖性：更具体的组合选择器优先级更高，会覆盖更通用的选择器。
示例
以下示例展示了如何使用组合选择器为特定元素设置样式：
<code class="css">/* 为所有带有类名 "active" 的 `li` 中的 `a` 元素设置红色字体 */
li.active > a {
color: red;
}</code>注意事项
- 组合选择器可以非常具体，但避免过度使用，因为它可能会降低代码的可读性和可维护性。
- 如果可能，使用更简单的选择器（例如类或 ID 选择器）来改善性能。
- 了解组合符的优先级规则对于避免选择器冲突至关重要。
