CSS中多个类中的逗号和空格是什么意思? [英] What do commas and spaces in multiple classes mean in CSS?

问题描述

这是一个我看不懂的例子:

.container_12 .grid_6,.container_16 .grid_8 {宽度:460px；}

在我看来 width: 460px 适用于所有上述类.但是为什么有些类用逗号(,)隔开，有些只用空格隔开?

我假设 width: 460px 将仅应用于那些以 CSS 文件中提到的方式组合类的元素.例如，它将应用于

但不会应用于

.这个假设正确吗?

解决方案

.container_12 .grid_6,.container_16 .grid_8 {宽度: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 {颜色:蓝色；}

它在功能上等同于:

.blueCheese { 颜色:蓝色 }.blueBike { 颜色:蓝色 }

但减少了冗长.

Here is an example that I do not understand:

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

It seems to me that width: 460px is applied to all above mentioned classes. But why some classes are separated by a comma (,), and some just by a space?

I assume that width: 460px will be applied only to those elements which combine classes in the way mentioned in the CSS file. For example, it will be applied to <div class='container_12 grid_6'> but it will not be applied to the <div class='container_12'>. Is this assumption correct?

解决方案

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

That says "make all .grid_6's within .container_12's and all .grid_8's within .container_16's 460 pixels wide." So both of the following will render the same:

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

As for the commas, it's applying one rule to multiple classes, like this.

.blueCheese, .blueBike {
  color:blue;
}

It's functionally equivalent to:

.blueCheese { color:blue }
.blueBike { color:blue }

But cuts down on verbosity.

这篇关于CSS中多个类中的逗号和空格是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！