.element .symbol

表示.element内部的.symbol

.element.symbol

表示也具有类symbol的.element。
所以，

.element.large .symbol

意味着.element中的.symbol也具有类large。

我想你有点误解第一句话的意思了。

.element .symbol {}

意味着这些CSS设置将应用于类.element的元素内类.symbol的任何HTML元素。

<div class="element">
    <div class="symbol" />
</div>

在本例中，第一个CSS条目将影响中间的<div>标记。
你的第二个例子意味着第一个类需要两个类被影响，除此之外，它和第一个是一样的。

<div class="element large">
    <div class="symbol" />
</div>

因此，如果HTML看起来像这样，CSS值也将应用于内部的<div>标记。
如果你想设置分别应用于多个类的CSS标签，那么你需要用逗号将它们分开。

.element, .symbol {}

• 编辑：* 通过请求CSS选择器的documentation链接。

使用

.element.large

指具有两个类的元素：

<div class="element large"></div>

而不是元素的后代：

.element .large

这意味着：

<div class="element">
    <div class="large"></div>
</div>

仅

<div class="large"></div>

就是“接受”这些风格。

基本上，由空格分隔意味着两个元素具有descendant关系。

当一个元素位于另一个元素内部时，可以使用.element .symbol this。例如：

<div class="element">
    <i class="symbol"></i>
</div>

如果你想区分一些div，你可以添加一个额外的类，只针对那些不同的div，并使用.element.large .symbol作为目标。

<div class="element large">
    <i class="symbol"></i>
</div>

在第二个示例中，选择器的第一部分只是一个包含两个类的元素，如<span class="element large">或<span class="large element">。
通常，选择器的每个部分应用于一个HTML元素。
table[border].clname表示具有border属性和clname类的表，而table [border] .clname表示表中具有border属性的元素中具有clname类的元素。
(Edit：嗯，我说的是“一个HTML元素”，但当然你可以有不止一个这样应用的表。你明白的。）