CSS选择器中有多个类

我看到一个这样的选择器，

.class1 .class2 .class3 {
}

这是什么意思？

我使用了多个没有空格的类选择器。空间意味着后代，但它对于类没有意义。

假设有一个具有以下标记的页面，

<div class="class1">
  <div class="class2">
    <div class="class3">
      Some page element(s).
    </div>
  </div>
</div>

您提供的CSS将为class3下的所有元素设置样式，这些元素在class2下，属于class1。

让我们说这是造型，

.class1 .class2 .class3{
  color:red;
}

它会将文本渲染为红色，这相当于以下内容，

div.class1 div.class2 div.class3 {
  color:red;
}

最后，下面什么也不做，

.class1.class2.class3{
  color:red;
}

编辑：如果标记改为以下，

<div class="class1 class2 class3">
      Some page element(s).
</div>

它会工作和渲染的文本为红色。

注意： IE7可能有上述问题…

相关文章