发布于 2年前

多类选择器和后代选择器

今天看到一个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>
©2020 edoou.com   京ICP备16001874号-3