css - CSS 选择器中的多个类

Question

我看到这样的选择器，

.class1 .class2 .class3 {
}

这是什么意思？

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

Answer 1

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

<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 可能有上述问题...

http://www.thunderguy.com/semicolon/2005/05/16/multiple-class-selectors-in-internet-explorer/ http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html