CSS选择器里的空格

看 Ghsot 默认主题 CSS 文件里是发现不少下面样式的选择器:

.main-header .inner {    }
body.nav-opened .nav-cover {     }  

这种空格容易对我这样的刚开始学 CSS 的新手造成困扰,不确定有了空格后属于多类选择器还是后代选择器!于是便实践检验之。下面是测试用的代码。

<style type="text/css">  
    .fatest .stest{background-color: yellow;} 
    .fattest.stest{background-color: greenyellow;}
</style>  
<div class="fatest">father<div class="stest">son</div></div>  
<div class="fatest stest">father and son</div>  

运行结果

father
son
father and son

从实际结果看,类之间加个空格会变成后代选择器.classa .classb{ }将匹配拥有类 .classa 的元素的后代里拥有类 .classb 的元素。


随后又测试了元素选择符和类选择间带空格div .stest{}的情况。

<style type="text/css">  
    .fatest .stest{background-color: yellow;}
    .fattest.stest{background-color: greenyellow;}
    div .stest{color: red;}
    div .fatest{color: blue;}
</style>  
<div class="fatest">father<div class="stest">son</div></div>  
<div class="fatest stest">father and son</div>  

运行结果

fathersonfather and son

这里的div .fatest{color: blue;}无效,因为 .fatest 不存在 div 父元素。div .stest{color: red;}这种空格也是后代选择器,它匹配 div 后代里类属性值为 stest 的所有元素。