多类选择器和后代选择器
今天看到一个css的样式代码是这样的
ck.ck-reset,.ck.ck-reset_all,.ck.ck-reset_all * {
box-sizing: border-box;
width: auto;
height: auto;
position: static
}
瞬间石化了,以前写过这么多得选择器,还没有遇到过这样的情况。
网上搜索了一下:
两个选择器之间没有空格就是多类选择器。
两个选择器之间有空格就是后代选择器。
多类选择器的例子:
.important.urgent{
background:silver
}
分析解释:上面多类选择器匹配的是同时包含import和urgent的元素,比如
<div class="important urgent"></div>
后代选择器的例子:
.important .urgent {
background:sliver
}
分析解释:上面后代选择器匹配的是含important下的含urgent的元素,比如
<div class='important '>
<div class='urgent'>
</div>
</div>