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

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

表示“使所有.grid\u 6在.container\u 12内,使所有.grid\u 8在.container\u 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 { ... }

container_12 有阶级的后代(不一定是孩子) grid_6 ,并将CSS规则应用于具有类的DOM元素 网格\u 6 .

.container_12 > .grid_6 { ... }

放 > 他们之间说 网格\u 6 集装箱12

.container_12, .grid_6 { ... }

正如其他人所说,逗号是一种同时将规则应用于多个不同节点的方法。在这种情况下,这些规则适用于具有 集装箱12 或 网格\u 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 将仅应用于具有 .container_16 班级。

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

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

在示例中:

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

像这样的陈述

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

在id为“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/

Selectors combinations get different meanings - attached image explains easily

, )-相同的样式应用于所有选定的图元。

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

此处应用边框样式 DIV .elmnt-color 应用元素。

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

b) 由空格分隔的多个选择器称为后代选择器。

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

.elmnt颜色 应用元素 小孩 a的要素 部门 元素。

<!-- 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>

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

此处边框样式仅应用于 部门 .elmnt颜色

<!-- 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>

详情见 https://www.csssolid.com/css-tips.html

注意:CSS类只是CSS选择器之一。这些规则适用于 全部的