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

下面是一个我不理解的例子：

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

在我看来，

width:460px

适用于上述所有类。但是为什么有些类用逗号（

，

）分隔，而有些类只用空格分隔呢

我假设

width:460px

将只应用于那些以CSS文件中提到的方式组合类的元素。例如，它将应用于

，但不会应用于

。这个假设正确吗

.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 { color:blue }
.blueBike { color:blue }

但是减少了冗长

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

宽度：460px

将仅应用于

网格6

和

网格8

编辑：这是一篇非常好的文章

---

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

所以

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

---

仅将该样式应用于

.container\u 12

类中的class

.grid\u 6

和

.container\u 16

中的

.grid\u 8

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

当您看到两个元素并排不分开时，您可以假定它指的是一个区域内的一个区域。因此，在上面的示例中，此样式仅适用于容器12类中的grid_6类和容器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>

将仅在id为“admin”的区域内具有类“description”的区域内应用粗体标记，例如：

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

这是大胆的

此规则将DOM节点与类

container\u 12

匹配，该类具有类

grid\u 6

的子代（不一定是子代），并将CSS规则应用于类

grid\u 6

的DOM元素

.container_12 > .grid_6 { ... }

将

放在它们之间表示

网格6

节点必须是类为

容器12

的节点的直接子节点

.container_12, .grid_6 { ... }

---

正如其他人所说，逗号是一种同时将规则应用于多个不同节点的方法。在这种情况下，规则适用于具有

container_12

或

grid_6

类的任何节点

宽度：460px将应用于
.grid\u 8
类的元素，包含在
.container\u 16
类的元素中，以及
.grid\u 6
类的元素，包含在
.container\u 12
类的元素中

.container_12 > .grid_6 { ... }

.container_12, .grid_6 { ... }

空格表示遗产，逗号表示“和”。如果使用选择器放置属性，如

.class-a、.class-b
，将属性应用于两个类中任何一个的元素

希望我能帮上忙
 示例中有四个类和两个选择器：

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

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

因此
.container\u 12
和
.grid\u 6
都是类，但规则
宽度：460px
将仅应用于具有
.grid\u 6
类的元素，这些元素是具有
.container\u 16
类的元素的后代

例如：

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

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


这具有480px的宽度
宽度未知。</p>
问题不完全是这样，但这可能会有所帮助

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

例如：


.class1.class2{color:#f00；}
.class1.class2{颜色：#0f0；}
.class1、.class2{字体大小：粗体；}
粗体红色文本
粗体文本（非红色）
粗体绿色文本

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

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

在这里，边框样式应用于
DIV
元素和CSS类
.elmnt color
应用的元素

<!-- comma example -->
<div>
  Red border applied
</div>
<p class="elmnt-color">
  Red border applied
</p>

这里，边框样式应用于CSS类
.elmnt color
应用元素，这些元素是
DIV
元素的子元素

<!-- space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border applied
  </p>
</div>

这里，边框样式仅应用于CSS类为
.elmnt color
的
DIV
元素

<!-- no space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border NOT applied
  </p>
</div>
<div class="elmnt-color">
  Red border applied
</div>


红色边框不适用

红色边框不适用

红色边框不适用

红色边框不适用

应用红色边框

详情载于

注意：CSS类只是CSS选择器之一。这些规则适用于所有CSS选择器（例如：类、元素、ID等）。
我知道我们可以将一条规则应用于由COMA分隔的多个类。我不清楚为什么示例中的某些类没有用逗号分隔。当它们用空格分隔时，这是一个嵌套问题。后者存在于前者之中。所以
.container\u 12.grid\u 6
只处理
.container\u 12
项目中的
.grid\u 6
项目。只有
.grid\u 6
和
时，grid\u 8
位于
container\u 12
或
container\u 16
@sshow-谢谢。你是对的，但这是一个HTML问题。根据这个css代码，我的答案是对的，我知道这并不能回答你的问题，但我想推荐你试试SASS。考虑到类名，看起来将有大量重复的CSS。@Roman可能还有`.container_12.grid_6.line`注意，grid_6和line之间没有空格；这意味着元素应该同时具有grid_6和line as类。正如@Sampson在接受的答案中指出的那样，它应该是“容器”的孩子：）other said And not or？伟大的答案我喜欢它解释了
<!-- no space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border NOT applied
  </p>
</div>
<div class="elmnt-color">
  Red border applied
</div>