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?