相信大家都知道 .class1 .class2 和 .class1.class2 是两种不同的选择规则，但具体怎样不同呢？
首先中间有空格的情况：
是选择到.class1类下的.class2类子节点，即.class2类的节点要是.class1类子节点
代码：
<style>
.class1 {
color: black;
}
.class1 .class2 {
color: red;
}
</style>
<body>
<div class="class1">
I'm class1
<div class="class2">I'm class2,son of class1</div>
</div>
</body>
结果：
无空格情况：
是选择到同时拥有.class1和.class2的节点
代码：
<style>
.class1 { color: black; }
.class1 .class2 { color: red; }
.class1.class2 { color: blue; }
/*注意优先级，.class1 .class2的优先级比.class1.class2高，.class1 .class2写在.class1.class2后，.class1.class2会被覆盖*/
</style>
<body>
<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>
</body>
结果：
现在清楚了，不过还有一种情况是：在IE浏览器的“怪异模式”（“quirks” mode）下，.class1.class2 会没有效果，因为不支持 multiple selectors ，这时需要在文件开始加上 DOCTYPE ，像 或者其他 DOCTYPE 。
参考来源