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

What do commas and spaces in multiple classes mean in CSS?

提问by Roman

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: 460pxis applied to all above mentioned classes. But why some classes are separated by a comma (,), and some just by a space?

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

I assume that width: 460pxwill 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?

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

回答by Sampson

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

这表示“使 .container_12 中的所有 .grid_6 和 .container_16 中的所有 .grid_8 为 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>

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.

但减少了冗长。

回答by Steve Madsen

.container_12 .grid_6 { ... }

This rule matches a DOM node with class container_12that has a descendant (not necessarily a child) with class grid_6, and applies the CSS rules to the DOM element with class grid_6.

此规则匹配具有 class 的 DOM 节点，该 DOM 节点具有 classcontainer_12的后代（不一定是子节点）grid_6，并将 CSS 规则应用于class的 DOM 元素grid_6。

.container_12 > .grid_6 { ... }

Putting >between them says that the grid_6node must be a direct child of the node with class container_12.

放在>它们之间表示该grid_6节点必须是具有 class 的节点的直接子节点container_12。

.container_12, .grid_6 { ... }

A comma, as others have stated, is a way to apply rules to many different nodes at one time. In this case, the rules apply to any node with either a class of container_12or grid_6.

正如其他人所说，逗号是一种同时将规则应用于许多不同节点的方法。在这种情况下，规则适用于与任一类的任何节点container_12或grid_6。

回答by Alan Peabody

Not exactly what was asked, but maybe this will help.

不完全是问什么，但也许这会有所帮助。

To apply a style to an element only if it has both classes your selector should use no space between the class names.

仅当元素具有两个类时才将样式应用于元素，您的选择器不应在类名之间使用空格。

For Example:

例如：

.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }

<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>

回答by Cloudanger

Commagroups the classes (applies the same style to them all), an empty spacetells that the following selector must be within the first selector.

逗号对类进行分组（对所有类应用相同的样式），一个空格表示接下来的选择器必须在第一个选择器内。

Therefore

所以

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

applies that style to only class .grid_6which is within .container_12class and to .grid_8class which is within .container_16.

适用这种风格只类.grid_6是内部.container_12类和.grid_8类，这是内.container_16。

回答by 3rgo

The width: 460px;will be applied to the element with the .grid_8class, contained insidethe elements with .container_16class, and elements with the .grid_6class, contained insidethe elements with .container_12.

的width: 460px;将被应用到与该元件.grid_8类，包含内部与元件.container_16类，并与元件.grid_6类，包含内部与所述元件.container_12。

The space means heritage, and the comma means 'and'. If you put properties with a selector like
.class-a, .class-b, you will have the properties applied to the elements with anyone of the two classes.

空格表示遗产，逗号表示“和”。如果您将属性与像 一样的选择器放置
.class-a, .class-b，您将把属性应用于具有两个类中的任何一个的元素。

Hope I have helped.

希望我有所帮助。

回答by James Sumners

You have four classes and two selectors in your example:

您的示例中有四个类和两个选择器：

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

So .container_12and .grid_6are both classes, but the rule width: 460pxwill only be applied to elements that have the .grid_6class which are descendants of an element that have the .container_16class.

所以.container_12和.grid_6都是类，但规则width: 460px只适用于具有.grid_6类的元素，这些元素是具有.container_16类的元素的后代。

For example:

例如：

<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>

回答by clumsyfingers

The above means that you are applying styles to two classes, indicated by the comma.

以上意味着您将样式应用于两个类，用逗号表示。

When you see two elements side by side not separated you can assume that it is referring to an area within an area. So in the above, this style only applies to grid_6 classes inside of container_12 classes and grid_8 classes inside of container_16 classes.

当您看到两个并排的元素没有分开时，您可以假设它指的是一个区域内的一个区域。所以在上面，这种风格只适用于container_12 类中的grid_6 类和container_16 类中的grid_8 类。

in the example:

在示例中：

<div class="grid_6">This is not effected</div>
<div class="container_12">
  <div class="grid_6">
    This is effected.
  </div>
</div>

The first grid_6 will not be effected while the second grid_6 class will because it is contained inside a container_12.

第一个 grid_6 不会受到影响，而第二个 grid_6 类会受到影响，因为它包含在 container_12 中。

A statement like

像这样的声明

#admin .description p { font-weight:bold; }

Would only apply the bold to

只会将粗体应用于

tags within areas that have class "description" that are inside of an area with id "admin", such as:

具有类“描述”的区域内的标签位于 ID 为“admin”的区域内，例如：

<div id="admin">
   <div class="description">
      <p>This is bold</p>
   </div>
</div>

回答by Jitendra Vyas

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

width:460pxwill be only applied to .grid_6and .grid_8

width:460px将只适用于.grid_6和.grid_8

Edit: Here is a very good article for you

编辑：这是一篇非常好的文章给你

http://css-tricks.com/multiple-class-id-selectors/

http://css-tricks.com/multiple-class-id-selectors/

回答by Selva

Selectors combinations get different meanings - attached image explains easily

选择器组合有不同的含义 - 附上的图片很容易解释

a) Multiple selectors separated by a comma(“,”) - Same styles are applied to all selected elements.

a) 用逗号（“,”）分隔的多个选择器 - 对所有选定元素应用相同的样式。

div,.elmnt-color {
   border:1px solid red;
}

Here border style is applied to DIV elements and CSS class(.elmnt-color) applied elements.

这里边框样式应用于 DIV 元素和 CSS class(.elmnt-color) 应用元素。

b) Multiple selectors separated by space – Those are called descendant selectors.

b) 多个由空格分隔的选择器——这些被称为后代选择器。

div .elmnt-color {
background-color:red;

}

}

Here border style is applied to CSS class(.elmnt-color) applied elements which are child elements of DIV element.

这里边框样式应用于 CSS class(.elmnt-color) 应用元素，这些元素是 DIV 元素的子元素。

c) Multiple selectors specified without space - Here styles are applied to elements which meet all the combinations.

c) 没有空格指定的多个选择器 - 这里的样式应用于满足所有组合的元素。

div.elmnt-color {
    border:1px solid red;
}

Here border style is applied to CSS class(.elmnt-color) applied DIV elements only.

这里边框样式仅应用于 CSS 类（.elmnt-color）应用的 DIV 元素。

Details are attached at https://www.csssolid.com/css-tips.html

详细信息附在https://www.csssolid.com/css-tips.html

Note: CSS Class is one of the CSS Selector. Above rule is applicable to all CSS Selectors(ex: Class, Element, ID etc.,).

注意：CSS 类是 CSS 选择器之一。以上规则适用于所有 CSS 选择器（例如：类、元素、ID 等）。