导读:有时候遇到css类选择器中间没有空格的,应用两个类样式都有效果,但是加个空格在类选择器中间,有的样式就没有效果了,这是为什么呢??
无空格
.m-nav.nav-expanded {}
这两个样式同级,class中同时有.m-nav和.nav-expanded才能应用到这个选择器中的样式
//less
.m-nav {
&.nav-expanded {}
}
有空格
.m-nav .nav-expanded {}
后代选择器,class=nav-expanded的元素是class=m-nav的元素的后代元素
//less
.m-nav {
.nav-expanded {}
}
在less的写法就可以看出来,同级的样式用嵌套的方式写,要写上&,不然就是后代选择器的写法。