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

  • Z时代
  • 2024-01-10
  • 分类：问答

这是我不明白的例子：

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

但是减少了冗长。

以上是 CSS中多个类中的逗号和空格是什么意思？ 的全部内容， 来源链接： utcz.com/qa/421951.html

回到顶部