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

一尘不染

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

阅读 619

2020-05-16

共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 }

但是减少了冗长。

2020-05-16