CSS 中的类选择器是我们在样式表中频繁使用的工具。然而，对于初学者来说，某些选择器的使用方式可能会引起混淆，尤其是像 '.parent.son' 和 '.parent .son' 这样的选择器。虽然它们看起来非常相似，但实际上它们的应用场景和效果是有很大差异的。

1. 理解 '.parent.son'

当你在 CSS 中看到 '.parent.son'，这意味着你在寻找同时具有 'parent' 和 'son' 类的 HTML 元素。这个选择器会选择那些 class 属性同时包含 'parent' 和 'son' 的元素。例如：

<div class="parent son">我是同时拥有 parent 和 son 类的元素</div>

在这个例子中，上述 div 将匹配 CSS 选择器 '.parent.son'，并应用相应的样式。

2. 理解 '.parent .son'

另一方面，当你在 CSS 中看到 '.parent .son'（注意中间的空格），这意味着你在寻找类为 'son' 的元素，而这个元素是类为 'parent' 的元素的后代。请注意，这里的 "后代" 不仅包括直接子元素，还包括孙子元素、曾孙元素等。例如：

<div class="parent">
    <div class="son">我是 parent 元素的直接子元素，同时我也有 son 类</div>
    <div class="child">
        <div class="son">我是 parent 元素的孙子元素，同时我也有 son 类</div>
    </div>
</div>

3. 两者的对比

现在我们已经理解了 '.parent.son' 和 '.parent .son' 的含义，让我们再次对比一下它们：

• '.parent.son' 选择的是同时具有 'parent' 和 'son' 类的元素。

• '.parent .son' 选择的是 'parent' 元素的后代中具有 'son' 类的元素。

两者的主要区别在于，'.parent.son' 是寻找单个元素，这个元素同时具有两个类，而 '.parent .son' 是寻找一种层级关系，即 'son' 是 'parent' 的后代。