静下心来的个人专栏
上一篇

多类选择器和后代选择器

广告
选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。
大纲

今天看到一个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>

大家应该理解了吧。欢迎讨论

版权声明:著作权归作者所有。

X

欢迎加群学习交流

联系我们