CSS选择器：#id和.class中间有空格和无空格的区别
2019-07-13 本文已影响0人
StevenQin
相信大家都知道 .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 html> 或者其他 DOCTYPE 。
