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>
它将起作用并将文本呈现为红色。

注意：

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

Answer 2

其他答案为您提供了所需的说明；我将介绍一个实际用例，以满足任何人的好奇心。

Answer 3

div{
    padding: 5px;
    border: 1px solid #f00
}
.class1 .class2 .class3 {
   background-color: #000;
}

Answer 4

它仍然表示后代，如果您嵌套了层次结构，则对于类确实有意义。例如：

Answer 5

要匹配“类”值的子集，每个值必须以“。”开头，以任何顺序。

Answer 6

尝试：