CSS中两个class之间有空格和没空格的区别

一、有空格

　　有空格表示后代选择器，选择的是.example内的.children

.example .children {
    color: orange;
}

<p class="example">
    <p class="children">children</p>
</p>

二、没有空格

　　没有空格表示.example.children在一个元素上，该元素必须同时又这两个class才生效

.example.children {
    color: orange;
}

<p class="example children ">example</p>

 

参考另一个案例：