CSS選擇器：#id和.class中間有空格和無空格的區別

相信大家都知道 .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 。

參考來源：What's the difference between .class1.class2 and .class1 .class2 CSS rule?