在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&nbsp;.grid_6,.container_16&nbsp;.grid_8&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;460px;}上面写着“让所有的.Grid_6都在.容器_12‘s内，而所有.Grid_8都在.CONTER_16的460像素范围内。”因此，以下两种方法都将呈现相同的结果：<div&nbsp;class="container_12"> &nbsp;&nbsp;<div&nbsp;class="grid_6">460px&nbsp;Wide</div></div><div&nbsp;class="container_16"> &nbsp;&nbsp;<div&nbsp;class="grid_8">460px&nbsp;Wide</div></div>至于逗号，它将一个规则应用于多个类，如下所示。.blueCheese,&nbsp;.blueBike&nbsp;{ &nbsp;&nbsp;color:blue;}它在功能上相当于：.blueCheese&nbsp;{&nbsp;color:blue&nbsp;}.blueBike&nbsp;{&nbsp;color:blue&nbsp;}但是减少了细节。

Answer 2

.container_12&nbsp;.grid_6&nbsp;{&nbsp;...&nbsp;}此规则将DOM节点与类匹配。container_12具有类的后代(不一定是子代)。grid_6，并将CSS规则应用于带有类的DOM元素。grid_6..container_12&nbsp;>&nbsp;.grid_6&nbsp;{&nbsp;...&nbsp;}放>他们之间说grid_6节点必须是具有类的节点的直接子节点。container_12..container_12,&nbsp;.grid_6&nbsp;{&nbsp;...&nbsp;}如其他人所述，逗号是一种一次将规则应用于许多不同节点的方法。在这种情况下，规则适用于具有container_12或grid_6.