Question

这可能是我做过的最愚蠢的问题，但为什么下面的文字没有呈现红色？

<html>
  <style>
  .c1 .c2 { 
     color: red; 
  }
  </style>
  <body>
     <span class="c1 c2">This should be red</span>
  </body>
</html>

编辑：我想匹配包含c1和c2类的元素，就像上面的例子一样，不能少。

Answer 1

.c1 .c2匹配c1元素中的c2元素，就像html body匹配html元素中的body元素一样。删除空格以匹配两个类的元素：

.c1.c2 { 
   color: red; 
}

Answer 2

应该是.c1.c2。你写的方式是c2 INSIDE a c1。

Answer 3

选择器.c1 .c2实际上是指具有类c2的元素中具有类c1的元素。

要获得所需的结果，请将您的选择器更改为.c1.c2，这将匹配两种样式的元素。

Answer 4

如果CSS的预期含义是匹配“类别列表中包含c1和c2的元素”，那么它应该是.c1.c2。给定的选择器（.c1 .c2）表示“具有类c2的元素，它直接位于具有类c1”的元素内。

编辑：为了完整起见，要将元素与至少一个类c1和c2匹配，您可以使用.c1, .c2。因此，空格指的是文档的结构，没有空格是“和”，逗号是“或”。

Answer 5

因为.c1 .c2选择c2元素是c1元素的子/后代。

你想要的是：

c1,
c2 {color: red; }

回应OP的评论

仅定位具有两个类的元素：

c1.c2 {color: red; }

Answer 6

.c1后需要逗号？