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”的元素被選中。