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

问题描述

以下是我不明白的范例：

Here is an example that I do not understand:

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

在我看来， 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?

width：460px 将仅应用于那些以CSS文件中提到的方式组合类的元素。例如，它将应用于< div class ='container_12 grid_6'> ，但不会应用于< div类='container_12'> 。这个假设是否正确？

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

这说明.grid_6在.container_12内，所有.grid_8在。 container_16的460像素宽。因此，以下两个代码将呈现相同的结果：

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

它在功能上等同于：

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

但是减少了冗长。

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