1. CSS 组合选择器基础概念

CSS 组合选择器是前端开发中用于精确控制元素样式的核心工具。它们通过描述元素之间的特定关系，让我们能够在不添加额外类名的情况下精准定位目标元素。在实际项目中，合理使用组合选择器可以显著减少冗余代码，提高样式表的可维护性。

选择器组合的本质是建立元素间的关联规则。浏览器在解析这些规则时，会从右向左进行匹配。这意味着像 div p 这样的后代选择器，浏览器会先找到所有 <p> 元素，然后再检查它们是否有 <div> 祖先。理解这个匹配机制对编写高效选择器至关重要。

提示：组合选择器的优先级计算遵循标准CSS优先级规则。多个选择器组合时，它们的优先级会叠加，但不会超过内联样式和!important声明。

2. 后代选择器详解与应用

2.1 基本语法与匹配原理

后代选择器（Descendant Selector）使用空格字符连接两个简单选择器，格式为 A B。它会匹配所有属于A元素后代的B元素，无论它们之间隔了多少层嵌套。这是CSS中最常用的组合选择器之一。

css复制/* 匹配article元素下的所有p元素 */
article p {
  line-height: 1.6;
  color: #333;
}

这个选择器会选中以下所有<p>元素：

html复制<article>
  <p>直接子元素</p>
  <div>
    <p>嵌套在div中的p</p>
    <section>
      <p>深层嵌套的p</p>
    </section>
  </div>
</article>

2.2 性能优化实践

虽然后代选择器非常灵活，但过度使用可能导致性能问题。浏览器需要检查每个B元素的所有祖先链，这在大型DOM树中会带来明显开销。优化建议：

1. 尽量避免超过3层的后代选择器链
2. 在可能的情况下，用更具体的选择器替代宽泛的后代选择器
3. 对于频繁动态更新的元素，考虑使用类选择器

css复制/* 不推荐 - 过于宽泛 */
div div p span {}

/* 推荐 - 更具体的选择器 */
.article-content .highlight-text {}

3. 子代选择器精准控制