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'>。这个假设正确吗？

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

那就是“将所有.grid_6放在.container_12的范围内，并将所有.grid_8放在.container_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 }

但是减少了冗长。

.container_12 .grid_6 { ... }

此规则将DOM节点与class匹配，该DOM节点具有class container_12的后代（不一定是孩子）grid_6，并将CSS规则应用于的DOM元素grid_6。

.container_12 > .grid_6 { ... }

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

.container_12, .grid_6 { ... }

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

要求的不完全是，但这也许会有所帮助。

要将样式仅应用于元素同时具有两个类的情况，选择器不应在类名称之间使用空格。

例如：

.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }

<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>

逗号对类进行分组（将相同的样式应用于所有类），空白处表示以下选择器必须位于第一个选择器内。

因此

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

适用这种风格只类.grid_6是内部.container_12类和.grid_8类，这是内.container_16。

的width: 460px;将被应用到与该元件.grid_8类，包含内部与元件.container_16类，并与元件.grid_6类，包含内部与所述元件.container_12。

空间表示遗产，逗号表示“与”。如果您使用选择器来放置属性，例如
.class-a, .class-b，则将使用两个类中的任何将属性应用于元素。

希望我有所帮助。

您的示例中有四个类和两个选择器：

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

所以.container_12和.grid_6都是两个类，但是规则width: 460px将仅应用于具有.grid_6该类的元素，这些元素是具有.container_16该类的元素的后代。

例如：

<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>

上面的意思是您正在将样式应用于两个类，以逗号表示。

当您看到两个并排不分开的元素时，可以假定它是指一个区域中的一个区域。因此，在上面，此样式仅适用于container_12类内部的grid_6类和container_16类内部的grid_8类。

在示例中：

<div class="grid_6">This is not effected</div>
<div class="container_12">
  <div class="grid_6">
    This is effected.
  </div>
</div>

第一个grid_6将不会受到影响，而第二个grid_6类将受到影响，因为它包含在container_12内部。

像这样的声明

#admin .description p { font-weight:bold; }

仅将粗体应用于

标识为“ admin”的区域内具有类“ description”的区域内的标签，例如：

<div id="admin">
   <div class="description">
      <p>This is bold</p>
   </div>
</div>

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

width:460px将仅应用于.grid_6和.grid_8

编辑：这是一个非常适合您的文章

http://css-tricks.com/multiple-class-id-selectors/

选择器组合具有不同的含义-所附图片易于说明

a）用逗号（“，”）分隔的多个选择器-相同的样式应用于所有选定的元素。

div,.elmnt-color {
   border:1px solid red;
}

这里，边框样式应用于DIV元素和CSS class（.elmnt-color）应用的元素。

b）由空间分隔的多个选择器–称为后代选择器。

div .elmnt-color {
background-color:red;

}

在此，边框样式将应用于CSS类（.elmnt-color）应用的元素，这些元素是DIV元素的子元素。

c）指定了多个选择器而没有空格-在这里，样式适用于满足所有组合的元素。

div.elmnt-color {
    border:1px solid red;
}

此处，边框样式仅应用于CSS类（.elmnt-color）应用的DIV元素。

详细信息附在https://www.csssolid.com/css-tips.html

注意：CSS类是CSS选择器之一。以上规则适用于所有CSS选择器（例如：类，元素，ID等）。