在CSS中，多个类中的逗号和空格意味着什么？

Question

在CSS中，多个类中的逗号和空格意味着什么？这里有一个我不明白的例子：.container_12 .grid_6,.container_16 .grid_8 {     width: 460px;}在我看来width: 460px应用于上述所有类。但是为什么某些类用逗号分隔(,)，还有一些就在一个空间旁边吗？我想width: 460px将只应用于以CSS文件中提到的方式组合类的元素。例如，它将应用于<div class='container_12 grid_6'>但是它不会应用于<div class='container_12'>..这个假设正确吗？

Answer 1

.container_12 .grid_6,.container_16 .grid_8 {
    width: 460px;}

上面写着“让所有的.Grid_6都在.容器_12‘s内，而所有.Grid_8都在.CONTER_16的460像素范围内。”因此，以下两种方法都将呈现相同的结果：

<div class="container_12">
  <div class="grid_6">460px Wide</div></div><div class="container_16">
  <div class="grid_8">460px Wide</div></div>

至于逗号，它将一个规则应用于多个类，如下所示。

.blueCheese, .blueBike {
  color:blue;}

它在功能上相当于：

.blueCheese { color:blue }.blueBike { color:blue }

但是减少了细节。

Answer 2

.container_12 .grid_6 { ... }

此规则将DOM节点与类匹配。container_12具有类的后代(不一定是子代)。grid_6，并将CSS规则应用于带有类的DOM元素。grid_6.

.container_12 > .grid_6 { ... }

放>他们之间说grid_6节点必须是具有类的节点的直接子节点。container_12.

.container_12, .grid_6 { ... }

如其他人所述，逗号是一种一次将规则应用于许多不同节点的方法。在这种情况下，规则适用于具有container_12或grid_6.