CSS样式名之间空格，无空格和大于号的区别

今天看代码，练习demo时发现css样式表里面  .layout.float .left{} 的写法有一些疑惑，查询资料后得到的理解如下：

CSS 多类选择器

通过把多个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）

.layout.float   两者之间无空格

例如：

.layout.float { color: red; }

<div class="layout float">被选择的元素</div>

注意：在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。

CSS 后代选择器

.layout .float   中间用空格隔开，表示后代选择器，选择的是.layout内的.float (两个元素之间的层次间隔可以是无限的)

.layout .float{
  color: orange;
}

<div class="layout">
    <div class="float">被选择的元素</div>
    <div>
        <div class="float">被选择的元素</div>
    </div>
</div>

CSS 子元素选择器

.layout > .float    中间是大于号，表示元素的子元素

.layout > .float{
  color: blue;
}

<div class="layout">
    <div class="float">被选择的元素</div>
    <div>
        <div class="float">没有被选择的元素</div>
    </div>
</div>

所以 .layout.float .left{} 的意思是类名包含“layout float”的元素，其后代类名包含“left”的元素被选中。