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

Question

这是一个我不明白的例子:

.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放在.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 }

但减少冗长.

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.

Answer 3

不完全是被问到的,但也许这会有所帮助.

要仅在具有两个类的情况下将样式应用于元素,则选择器应在类名之间不使用空格.

例如:

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

Answer 4

逗号对类进行分组(对它们应用相同的样式),空白空间表示以下选择器必须位于第一个选择器中.

因此

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

将该样式仅应用于类.grid_6中的.container_12类和.grid_8类中的类.container_16.

Answer 5

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

空间意味着遗产,逗号意味着'和'.如果使用类似的选择器放置属性
.class-a, .class-b,则将使用这两个类中的任何一个将属性应用于元素.

希望我有所帮助.