Concatenación de selectores en CSS

Cuando separas dos selectores con un espacio?  Por ejemplo:
Block 1:

div {
    color: brown;
}

div.special {
    font-size: 18px;
}

Block 2:

div {
    color: brown;
}

div .special {
    font-size: 18px;
}

This is the HTML:

<div class="special">The quick brown fox jumps over the lazy dog.</div>

I tried both versions. Only with block 1 the text wil be in font size 18.

This is because:

Tu debes separar clases con un espacio cuando quiers hacer referencia decendente a un elemento y concatenas clases cuando quieres referir a un elemento en particular con multiples clases.

Por ejemplo, para referir a un DIV con dos clases, e.g.
<div class="foo bar"> tu puedes usar:

div.foo.bar {...}

Para referir a un elemnto hijo span

<div class="foo"><span class="bar">stuff</span></div> puedes usar:

div.foo .bar {...}