相信大家都知道 .class1 .class2 和 .class1.class2 是兩種不同的選擇規則，但具體怎樣不同呢？

首先中間有空格的情況：是選擇到.class1類下的.class2類子節點，即.class2類的節點要是.class1類子節點

.class1 { color: black; }
.class1 .class2 { color: red; }

<div class="class1">
    I'm class1
    <div class="class2">I'm class2,son of class1</div>
</div>
 

結果：

無空格情況：是選擇到同時擁有.class1和.class2的節點

.class1 { color: black; }
.class1 .class2 { color: red; } 
.class1.class2 { color: blue; }
/*注意優先順序，.class1 .class2的優先順序比.class1.class2高，.class1 .class2寫在.class1.class2後，.class1.class2會被覆蓋*/

<div class="class1">
    I'm class1
    <div class="class2">I'm class2,son of class1</div>
    <div class="class1 class2">I'm class1class2,son of class1</div>
</div>
 

結果：

現在清楚了，不過還有一種情況是：在IE瀏覽器的“怪異模式”（"quirks" mode）下，.class1.class2 會沒有效果，因為不支援 multiple selectors ，這時需要在檔案開始加上 DOCTYPE ，像 或者其他 DOCTYPE 。