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?