CSS中多个类中的逗号和空格是什么意思?-前端问题

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

本文介绍了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中多个类中的逗号和空格是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！